javascript - d3.js 同一页面中多个元素上的可重用图表

Question

我正在致力于开发基于 d3.js 框架的图表。在 Towards Reusable Charts他们提出了开发可重复使用图表的传统方法。

但我无法理解如何相同chart对象用于渲染两个不同的 svg 元素。

例如我们说，

我们有一个图表对象

function chart() {
  var width = 720, // default width
      height = 80; // default height

  function my() {
    // generate chart here, using `width` and `height`
  }

  my.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return my;
  };

  return my;
}

var chartobject = chart().width(100);

使用相同的chartobject ，有两个 svg 元素，id1、id2 我想生成并更新图表

d3.select("#id1").data(data).call(chartobject)

d3.select("#id2").data(data).call(chartobject)

我的问题在这里，如果我想 update the height of the chart or change any color properties对于svg#id2施工后独自一人，该怎么办？是否可以？我不想在这里重建。我只是想更新图表的颜色!如果我在这里做错了什么，请纠正我。

Answer 1

当您调用图表时，您需要两个不同的图表对象。您可以通过声明 .height() 来更新高度和宽度。和.width()下chart()

var chartobject = chart().width(100).height(100)d3.select("#id1").data(data).call(chartobject);

var chartobject2 = chart().width(200).height(200)d3.select("#id2").data(data).call(chartobject2);