javascript - 无法缩放 D3 组条形图

Question

我创建了一个组条形图，并尝试应用缩放，但缩放仅适用于第一组，而不适用于整个组条形图。任何帮助将非常感激。提前致谢。

你可以在这里找到工作 fiddle :

http://jsfiddle.net/fiddlefollower/qkHK6/893/

代码详细信息:

var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c",  "#ff8c00"]);
var xAxis = d3.svg.axis().scale(x0).orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".1s"));

 var svg = d3.select("#chart").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 + ")")
.call(d3.behavior.zoom().scaleExtent([1, 10]).on("zoom", zoom));

 var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
 console.log("ageNames="+JSON.stringify(ageNames));
data.forEach(function(d) {
d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
  console.log("d.ages="+JSON.stringify(d.ages));
});

x0.domain(data.map(function(d) { return d.State; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { 
  console.log(" before retuen d.ages="+d.ages);
return d3.max(d.ages, function(d) 
{ console.log("d.value;="+d.value);
return d.value; }); 
})]);
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".5em")
  .style("text-anchor", "end")
  .text("Population");

 var state = svg.selectAll(".state")
  .data(data)
  .enter().append("g")
  .attr("class", "state")
  .attr("transform", function(d) { return "translate(" + x0(d.State) +    ",0)"; });

 state.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

 function zoom() {
 svg.select(".state").attr("transform", "translate("+ d3.event.translate[0]+")scale(" + d3.event.scale + ",1)");
 svg.select(".x.axis").attr("transform", "translate(" +      d3.event.translate[0]+","+(height)+")").call(xAxis.scale(x0.rangeRoundBands([0,      width * d3.event.scale],.5 * d3.event.scale)));
 svg.select(".y.axis").call(yAxis);
 }

Answer 1

在缩放功能中，svg.select(".state") 仅选​​择第一组条形，svg.selectAll(".state") 选择所有组。

使用新变量 allStates 将所有状态分组到“g”元素中

  var allStates = svg.append("g")
      .attr("class", "allStates");

并引用这个新变量

 var state = allStates.selectAll(".state")
  .data(data)
  .enter().append("g")
  .attr("class", "state")
  .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

还有缩放功能

svg.select(".allStates").attr("transform", "translate(" + d3.event.translate[0]+",0)scale(" + d3.event.scale + ",1)");

双击事件时，它将放大所有状态