Question

我有piechart.html和barchart.html，我已将它们包含在另一个html中。两个图表彼此重叠。我在饼图和条形图中都使用了svg。我认为这是问题。如何解决这个问题

My pie code:
===========
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

My Bar code:
==========
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", 
    "translate(" + margin.left + "," + margin.top + ")");

提前致谢

Answer 1

重命名每个图表的变量：

var svgPie = d3.select("body").append("svg").attr("class","pie-chart")

和

var svgBar = d3.select("body").append("svg").attr("class","bar-chart")

然后分别在每个图表上应用逻辑。

Answer 2

最好使用bootstrap将页面分成几个部分，并使用div的id来调用图表呈现功能（取决于使用d3创建的库的类型）。

var renderContainer = d3.select（＆＃39;＃＆＃39; + renderContainerId）;

function render（renderContainer）{

renderContainer.append（＆＃39; SVG＆＃39）

更多代码在这里将矩形，馅饼等附加到svg

}

如何在一个页面上获取所有d3.js图表

2 个答案: