在同一页面上实现多个D3布局 [英] Implementing multiple D3 layout on same page

问题描述

我尝试在同一页面上添加多个D3图形，即饼图，条形图和使用CSV或JSON格式的不同数据的树形布局。但我无法在同一页面上实现所有这3个图表。当我在同一页面上链接多个布局时，我得到一个空白页面。

我尝试使用以下HTML和JS将不同div中的每个图表附加到

p>

HTML

 < div id = piediv >< / DIV> 
< div id =bardiv>< / div> 
< div id =treediv>< / div> 
  

JS

  var svg = d3.select（＃piediv）。append（svg）
 var svg = d3.select（＃bardiv）。append（ svg）
 var svg = d3.select（＃treediv）。append（svg）
  

上面的所有 JS 行都在它们各自的JS文件中， pie.js，bar.js和tree.js

解决方案

首先，我建议你使用不同的名称声明svg变量。

我用一个类似的问题为你做了一个小提琴;更详细地说，我已经用这种方式在同一页面创建了两个圆环图：

我创建了两个不同的< div> 与两个不同的ID

 < div id =chart>< / div> 
< div id =chart2>< / div> 
  

我也创建了两个不同的svgs（名称不同）

  var svg = d3.select（＃chart）。append（svg）
 .attr（width，width）
 .attr（height，height）
 .append（g）
 .attr（transform，translate（+ width / 2 +，+ height / 2 + ））; 
 $ b $ var svg2 = d3.select（＃chart2）。append（svg）
 .attr（width，width）
 .attr（height ，高度）
 .append（g）
 .attr（transform，translate（+ width / 2 +，+ height / 2 +））; 
  

检查小提琴了解更多详情

让我知道。

I tried to add multiple D3 graphs on same page i.e. Pie Chart, Bar Graph and a tree layout using different data in either CSV or JSON format. But I am not able to implement all of these 3 graphs on the same page. When I link more than 1 layout on a same page, I get a blank page.

I tried to append each chart in a different div using following HTML and JS

HTML

<div id="piediv"></div>
<div id="bardiv"></div>
<div id="treediv"></div>

JS

var svg = d3.select("#piediv").append("svg")
var svg = d3.select("#bardiv").append("svg")
var svg = d3.select("#treediv").append("svg")

All of the JS lines above are in their respective individual JS files viz. pie.js, bar.js and tree.js

解决方案

First of all i suggest you to declare svg variables with a different names.

I made a fiddle for you with a similar problem; more in details, I have created two donut charts in the same page in this way:

I have created two different <div> with two different ids

<div id="chart"></div>
<div id="chart2"></div>

and I also created two different svgs (with different name)

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var svg2 = d3.select("#chart2").append("svg")
   .attr("width", width)
   .attr("height", height)
   .append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Check the fiddle for more details

Let me know.

这篇关于在同一页面上实现多个D3布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！