Als Startlinie habe ich diesen Code genommen: https://bl.ocks.org/mbostock/882152 Ich versuche ein gruppiertes Balkendiagramm zu erstellen, das (zum Beispiel) drei Serien hat, und jeder von ihnen wird 6 Proben haben. Ich möchte, dass jede der Reihen relativ zu ihrer eigenen Y-Achse (primär oder sekundär) basierend auf der Information ist, die von dem Back-End übergeben wird. Wenn zum Beispiel eine der Serien die AxisType = "1" hat, dann wird sie mit der linken Y-Achse in Beziehung stehen, sonst wird sie, wenn sie AxisType = "2" ist, dann mit der rechten Y-Achse in Beziehung stehen. Ich habe versucht, das Ergebnis zu erreichen, das ich selbst möchte, aber ich stecke an dem Teil des Drehbuchs fest, an dem die Rechtecke entstehen. Mit Blick auf das Ergebnis unten, wie kann ich die letzte der Reihe (die grünen Balken) auf die zweite Y-Achse beziehen, nicht die erste?d3.js, gruppiertes Balkendiagramm mit zwei Y-Achsen, Serie bezogen auf Y1 oder Y2
var n = 6, // number of samples
\t m = 3; // number of series
var dataset = {
\t \t GraphType: 0,
\t \t Data: []
\t };
\t dataset.Data.push(
\t \t {
\t \t \t Axes: [],
\t \t \t AxisType: "1",
\t \t \t SeriesData: [{ state: 'CA', age: 2704659 },
\t \t \t \t { state: 'TX', age: 2027307 },
\t \t \t \t { state: 'NY', age: 1208495 },
\t \t \t \t { state: 'FL', age: 1140516 },
\t \t \t \t { state: 'IL', age: 894368 },
\t \t \t \t { state: 'PA', age: 737462 }],
\t \t \t GraphType: 0,
\t \t \t SeriesName: "Under 5 Years"
\t \t },
\t \t {
\t \t \t Axes: [],
\t \t \t AxisType: "1",
\t \t \t SeriesData: [{ state: 'CA', age: 4499890 },
\t \t \t \t { state: 'TX', age: 3277946 },
\t \t \t \t { state: 'NY', age: 2141490 },
\t \t \t \t { state: 'FL', age: 1938695 },
\t \t \t \t { state: 'IL', age: 1558919 },
\t \t \t \t { state: 'PA', age: 1345341 }],
\t \t \t GraphType: 0,
\t \t \t SeriesName: "5 to 13 Years"
\t \t },
\t \t {
\t \t \t Axes: [],
\t \t \t AxisType: "2",
\t \t \t SeriesData: [{ state: 'CA', age: 2159981 },
\t \t \t \t { state: 'TX', age: 1420518 },
\t \t \t \t { state: 'NY', age: 1058031 },
\t \t \t \t { state: 'FL', age: 925060 },
\t \t \t \t { state: 'IL', age: 725973 },
\t \t \t \t { state: 'PA', age: 1679201}],
\t \t \t GraphType: 0,
\t \t \t SeriesName: "14 to 17 Years"
\t \t }
\t);
var margin = { top: 20, right: 80, bottom: 30, left: 80 },
\t width = 960 - margin.left - margin.right,
\t height = 500 - margin.top - margin.bottom;
var y = d3.scale.linear()
\t .domain([0, 4499890]) // the biggest number for Primary Axis
\t .range([height, 0]);
\t
var y2 = d3.scale.linear()
\t .domain([0, 1679201]) // the biggest number for Secondary Axis
\t .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()
\t .domain(d3.range(m))
\t .rangeBands([0, x0.rangeBand()]);
// colors
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
\t .scale(x0)
\t .orient("bottom");
var yAxis = d3.svg.axis()
\t .scale(y)
\t .orient("left");
var ySecAxis = d3.svg.axis()
\t .scale(y2)
\t .orient("right");
// Append svg
var svg = d3.select("body").append("svg")
\t .attr("width", width + margin.left + margin.right)
\t .attr("height", height + margin.top + margin.bottom)
\t .append("svg:g")
\t .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Append y axis
svg.append("g")
\t .attr("class", "y axis")
\t .call(yAxis);
// Append secondary y axis
svg.append("g")
\t .attr("class", "y2 axis")
\t .attr("transform", "translate(" + width + " ,0)")
\t .call(ySecAxis);
// Append x axis
svg.append("g")
\t .attr("class", "x axis")
\t .attr("transform", "translate(0," + height + ")")
\t .call(xAxis);
svg.append("g").selectAll("g")
\t .data(dataset.Data)
\t .enter().append("g")
\t .style("fill", function (d, i) { return z(i); })
\t .attr("transform", function (d, i) { return "translate(" + x1(i) + ",0)"; })
\t .selectAll("rect")
\t .data(function(d) { return d.SeriesData; })
\t .enter().append("rect")
\t .attr("width", x1.rangeBand())
\t .attr("height", function (d) { return height - y(d.age); })
\t .attr("x", function (d) { return x0(d.state); })
\t .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>