d3.js 可在同一页面中的多个元素上重复使用图表答案

【问题标题】：d3.js reusable charts on multiple elements in same paged3.js 可在同一页面中的多个元素上重复使用图表
【发布时间】：2014-02-28 05:04:44
【问题描述】：

我正在开发基于 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，有两个 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 单独施工后，我该怎么办？是否可以？我不想在这里重建。我只想更新图表的颜色！！如果我在这里做错了什么，请纠正我。

【问题讨论】：

您需要两个不同的图表对象。

标签： javascript charts d3.js

【解决方案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);

【讨论】：