【发布时间】：2016-04-07 20:12:00
【问题描述】：
作为起点，我采用以下代码：https://bl.ocks.org/mbostock/882152 我正在尝试创建一个分组条形图，（例如）将有三个系列，每个系列都有 6 个样本。我希望根据从后端传递的信息，每个系列都相对于其自己的 Y 轴（主要或次要）。例如，如果其中一个系列有AxisType = "1"，那么它将与左 Y 轴相关，否则如果AxisType = "2"，则它将与右 Y 轴相关。我试图自己实现我想要的结果，但是我被困在创建矩形的脚本部分。
看看下面的结果，我怎样才能使系列的最后一个（绿色条）与第二个 Y 轴相关，而不是第一个？
var n = 6, // number of samples
m = 3; // number of series
var dataset = {
GraphType: 0,
Data: []
};
dataset.Data.push(
{
Axes: [],
AxisType: "1",
SeriesData: [{ state: 'CA', age: 2704659 },
{ state: 'TX', age: 2027307 },
{ state: 'NY', age: 1208495 },
{ state: 'FL', age: 1140516 },
{ state: 'IL', age: 894368 },
{ state: 'PA', age: 737462 }],
GraphType: 0,
SeriesName: "Under 5 Years"
},
{
Axes: [],
AxisType: "1",
SeriesData: [{ state: 'CA', age: 4499890 },
{ state: 'TX', age: 3277946 },
{ state: 'NY', age: 2141490 },
{ state: 'FL', age: 1938695 },
{ state: 'IL', age: 1558919 },
{ state: 'PA', age: 1345341 }],
GraphType: 0,
SeriesName: "5 to 13 Years"
},
{
Axes: [],
AxisType: "2",
SeriesData: [{ state: 'CA', age: 2159981 },
{ state: 'TX', age: 1420518 },
{ state: 'NY', age: 1058031 },
{ state: 'FL', age: 925060 },
{ state: 'IL', age: 725973 },
{ state: 'PA', age: 1679201}],
GraphType: 0,
SeriesName: "14 to 17 Years"
}
);
var margin = { top: 20, right: 80, bottom: 30, left: 80 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var y = d3.scale.linear()
.domain([0, 4499890]) // the biggest number for Primary Axis
.range([height, 0]);
var y2 = d3.scale.linear()
.domain([0, 1679201]) // the biggest number for Secondary Axis
.range([height, 0]);
var x0 = d3.scale.ordinal();
x0.domain(dataset.Data[0].SeriesData.map(function (d) { return d.state; }));
x0.rangeBands([0, width], .2);
var x1 = d3.scale.ordinal()
.domain(d3.range(m))
.rangeBands([0, x0.rangeBand()]);
// colors
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var ySecAxis = d3.svg.axis()
.scale(y2)
.orient("right");
// Append svg
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Append y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Append secondary y axis
svg.append("g")
.attr("class", "y2 axis")
.attr("transform", "translate(" + width + " ,0)")
.call(ySecAxis);
// Append x axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g").selectAll("g")
.data(dataset.Data)
.enter().append("g")
.style("fill", function (d, i) { return z(i); })
.attr("transform", function (d, i) { return "translate(" + x1(i) + ",0)"; })
.selectAll("rect")
.data(function(d) { return d.SeriesData; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("height", function (d) { return height - y(d.age); })
.attr("x", function (d) { return x0(d.state); })
.attr("y", function (d) { return y(d.age); });.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>【问题讨论】：
标签： javascript d3.js charts