在单个html页面中显示多个d3.js图表

Question

我有粘贴在这里的d3.js代码.

我试图在同一页面中显示多个图表.虽然d3.js代码是相同的.从data1.json中说一个,从data2.json中说另一个.以下是困扰我的片段.

<svg width="960" height="960"></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg2 = d3.select("svg"),
    margin = 20,
    diameter = +svg2.attr("width"),
    g = svg2.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

按照在SO不同的答案在这里,这里,这里,这里和这里的解决方案似乎是下列之一:

• 使用不同的变量名来保存svgs,例如svg1,svg2 ...等.我已经完成了.

• 使用此处描述的方法.

     var chart1 = d3.select("#area1")
         .append("svg")
  

方法二对我不起作用,因为它显示空白页面.

如何解决这个问题.我确信我没有正确地获得语法.

Answer 1

在同一页面上使用多个SVG完全没有问题。这是一个例子：

var svg1 = d3.select("#svg1");
svg1.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "red");
var svg2 = d3.select("#svg2");
svg2.append("circle")
       .attr("cx",100)
       .attr("cy", 100)
       .attr("r", 90)
       .attr("fill", "blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="200" height="200" id="svg1"></svg>
<svg width="200" height="200" id="svg2"></svg>

Answer 2

无需像您现在所做的那样重复所有代码。不要重复自己。

一个简单的替代方法是将所有 D3 代码包装在一个具有两个参数的函数中，selector并且url：

function draw(selector, url){
    //code here
};

然后，在该函数内draw，设置 SVG 的位置：

var svg = d3.select(selector).append("svg")...

以及获取数据的 URL：

d3.json(ulr, function(error, root) {...

之后，只需draw使用不同的参数调用该函数两次：

draw(selector1, url1);
draw(selector2, url2);

这是一个演示，仔细阅读看看它是如何工作的：

function draw(selector, url){
    //code here
};

var svg = d3.select(selector).append("svg")...

d3.json(ulr, function(error, root) {...