D3.js分组条形图 [英] D3.js grouped bar chart

问题描述

我使用D3.js制作条形图，例如
，但它应该是垂直的。所以我可以通过两组数据显示比较。
我使用 http://bost.ocks.org/mike/bar上的教程/ 2 / ，为了进行比较，我构建了两个类，chart和chart1并分别给他们数据，但它只显示第一个svg图表。问题是什么？
下面是代码
http://jsfiddle.net/x8rax/ p>

I am making a bar chart using D3.js like this but it is supposed to be vertical. so I can show comparison through two sets of data. I use the tutorial from http://bost.ocks.org/mike/bar/2/, to make the comparison,I build two classes, "chart" and "chart1" and give them data separately, but it only shows the first svg charts. What is the problem? Here is the code http://jsfiddle.net/x8rax/

<meta charset="utf-8">
<style>

.chart rect {
  fill: rgb(203, 232, 118);
}

.chart2 rect {
  fill: rgb(50, 50, 50);
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];


var width = 420,
    barHeight = 80;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);


var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);


bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });


//data is not so much interesting here.
</script>

<svg class = "chart2"></svg>
<script>
var data2 = [10, 10, 10, 10, 10, 10];

var width = 420,
    barHeight = 80;

var x2 = d3.scale.linear()
    .domain([0, d3.max(data2)])
    .range([0, width]);

var chart2 = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);

var bar2 = chart.selectAll("g")
    .data(data2)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar2.append("rect")
    .attr("width", x2)
    .attr("height", barHeight - 60);

</script>

推荐答案

您在3个地方省略了第二组变量的名称：

Got it. You left out the names of the second set of variables in 3 places:

1。

var chart2 = d3.select（。chart）（应为 chart2 ）

2。

.attr（height，barHeight * data.length）; 应为 data2 ）

3。

code> var bar2 = chart.selectAll（g）（应为 chart2 ）

var bar2 = chart.selectAll("g") (should be chart2)

会留下我在下面放置的东西。请注意位置：绝对在图表以使 chart2

Will leave what I did with the placing below. Note the position:absolute on chart to make chart2 overlap with it.

您的代码有几个问题，我刚刚复制的部分工作，并对数据进行更改。我会尝试找到你的代码中的所有问题，并编辑我的答案。

Your code has a couple problems, I just copied the part that works and made the changes to the data. I'll try to find all the issues in your code and edit my answer.

现在，这里是一个有效的解决方案。我认为是什么原因的问题是一些命名混乱，所以我只是覆盖相同的变量为两个图表。一旦添加了svg元素，你实际上不需要保存变量。

For now, here's a working solution. I think what causes problem is some naming confusion so I just overwrite the same variables for both charts. Once svg elements have been appended you don't really need to keep the variables around.

var data = [4, 8, 15, 16, 23, 42];


var width = 420,
    barHeight = 80;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);


var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

var data = [10, 10, 10, 10, 10, 10];


var width = 420,
    barHeight = 80;

var chart = d3.select(".chart2")
    .attr("width", width)
    .attr("height", barHeight * data.length);


var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + (i * barHeight + barHeight - 60 )  +")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 60);

http://jsfiddle.net/x8rax/6/

这篇关于D3.js分组条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！