同一頁面中多個元素上的d3.js可重用圖表

Question

我正在基於d3.js框架開發圖表。 他們在“ 邁向可重用圖表”中提出了開發可重用圖表的常規方法。

但是我不明白同一個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 ，具有兩個id1，id2的svg元素，我想生成和更新圖表

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 update the height of the chart or change any color properties ，該怎么辦？ 可能嗎？ 我不想在這里重建。 我只想更新圖表的顏色！ 如果在這里做錯了什么，請糾正我。

Answer 1

調用圖表時，您需要兩個不同的圖表對象。可以通過在chart()下聲明.height()和.width()來更新高度和寬度

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