Question

如此jsfiddle https://jsfiddle.net/6o4qu6jh/ ...

所示

我想使用input代码更改此可重复使用图表（https://bost.ocks.org/mike/chart/）的轴比例：

  <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/

d3.js v4可重用图表的更新元素

1 个答案: