Question

我使用http://bost.ocks.org/mike/bar/3/中的教程。虽然我希望有一个像grouped bar chart http://www.academyhealth.org/ahrq/elders/graph2.jpg这样的分组条形图。按照我上一个问题的答案，我创建了两个数据集，但第二个数据集的y位置永远不能设置为与第一个数据集相同。以下是设置条形图位置的代码段。

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

以下是代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart rect {
  fill: steelblue;
}

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

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


var data = [4, 5];


var width = 960,
    height = 500;

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

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);


  var barWidth_ = width /data.length;
  var barWidth = barWidth_/2;

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

  bar.append("rect")
      .attr("y", function(d) { return y(d); })
      .attr("height", function(d) { return height - y(d); })
      .attr("width", barWidth -200);

  bar.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d; });



var data_1 = [1000, 1000];
var width = 960,
    height = 500;


var y = d3.scale.linear()
    .range([height, 0])
    .domain([0, d3.max(data_1)]);

var chart = d3.select(".chart_1")
    .attr("width", width)
    .attr("height", height);


  var barWidth_ = width /data_1.length;
  var barWidth = barWidth_/2;

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

  bar.append("rect")
      .attr("y", function(d) { return y(d); })
      .attr("height", function(d) { return height - y(d); })
      .attr("width", barWidth -200);

  bar.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d; });



</script>

这里是jsfiddle代码 http://jsfiddle.net/tw981/BDLt6/

D3 js分组条形图位置

0 个答案: