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)
})

Работающий jsfiddle: https://jsfiddle.net/6o4qu6jh/2/