d3.js v4 обновляют элемент многоразовой диаграммы

Question

Как показано в этом jsfiddle https://jsfiddle.net/6o4qu6jh/ ...

Я хотел бы изменить ось масштаб этой многоразовой диаграммы (https://bost.ocks.org/mike/chart/), используя input тег:

<input type="checkbox" id="linlog"> 
    <label for="linlog"> Lin/Log scale</label> 

многоразового рассеивания, определенного в этой функции

d3.scatterplot = function(){ 

    [... other initial properties ...] 

    var xscale = d3.scaleLinear(); 
    var xaxis = d3.axisBottom() 
      .scale(xscale); 

    ///////////////////////////// 
    var chart = function(selection){ 

    [... other properties not depending on data ...] 

     xaxis.scale(xscale) 

     ///////////////////////////// 
     selection.each(function (data) { 

     [... other properties depending on data ...] 

     var svg = d3.select(this).selectAll("svg").data([data]); 

    var gEnter = svg.enter().append("svg") 
      .attr("width", 300) 
      .attr("height", 100) 
      .append("g") 

    gEnter.append("g") 
      .attr("transform", "translate(0," + height + ")") 
      .attr("class", "x axis") 
      .call(xaxis);   

     }); 

    return chart; 

} 

    ///////////////////////////// 

    [... other methods ...] 

    chart.xscale = function(_) { 
    if (!arguments.length) return xscale; 
    xscale = _; 
    if (_ == "lin" | _ == "linear") 
     xscale=d3.scaleLinear() 
    if (_ == "log" | _ =="logarithm" | _ =="logarithmic") 
     xscale=d3.scaleLog() 
    return chart; 
    }; 

    return chart; 
} 

и инициализируется с этой основной функции:

data=`date,price 
Jan 2000,1.46 
Feb 2000,16.42 
Mar 2000,14.58 
Apr 2000,152.43 
May 2000,1420.6 
Jun 2000,1454.6 
Jul 2000,1430.83 
Aug 2000,1517.68 
Sep 2000,1436.51` 


    data=d3.csvParse(data) 

    d3.select("body") 
     .append("figure") 
     .datum(data) 
     .call(scatter 
       .x("price") 
     ) 

Это показывает ось, но, к сожалению, следующий код для обновления не работает:

d3.select("#linlog").on("change", function(){ 
    var l=d3.select(this).property("checked") 
    var a; 

    l ? a=scatter.xscale("lin") : a=scatter.xscale("log") 

    d3.select("figure") 
    .call(a) 

})  

В чем проблема?

Answer 1

Вы почти поняли, что основная проблема заключается в том, что в вашей функции xscale вы не возвращаете новый масштаб.

chart.xscale = function(_) { 
    //... 
    return chart; // returning the chart object :(
} 

Позволяет изменить что:

chart.xscale = function(_) { 
    if (!arguments.length) return xscale; 
    xscale = _; 
    if (_ === "lin" | _ === "linear") { 
      xscale=d3.scaleLinear(); 
    } 
    if (_ === "log" | _ === "logarithm" | _ === "logarithmic") { 
     xscale = d3.scaleLog(); 
    } 
    return xscale; 
}; 

Поскольку мы называем новый масштаб, нам нужно настроить новые значения диапазона и домена, позволяет добавить, что:

chart.xscale = function(_) { 
    if (!arguments.length) return xscale; 
    xscale = _; 
    if (_ === "lin" | _ === "linear") { 
    xscale = d3.scaleLinear(); 
    } 
    if (_ === "log" | _ === "logarithm" | _ === "logarithmic") { 
    xscale = d3.scaleLog(); 
    } 
    var width = w - margin.left - margin.right; 
    var xrange = [0, width]; 
    xscale.range(xrange); 
    var xdomain = d3.extent(data, function(d) { 
    return +d[x]; 
    }) 
    xscale.domain(xdomain).nice(); 
    return xscale; 
}; 

наконец Назовём правильная функция оси

d3.select("#linlog").on("change", function() { 
    var l = d3.select(this).property("checked") 
    var a; 
    l ? a = scatter.xscale("lin") : a = scatter.xscale("log"); 
    var axis = d3.axisBottom().scale(a); 
    axis.ticks(5); 
    d3.selectAll("g .x.axis") 
    .call(axis) 
}) 

Working jsfiddle: https://jsfiddle.net/6o4qu6jh/2/