1
Başlangıç satırı olarak şu kodu aldım: https://bl.ocks.org/mbostock/882152 (örneğin) üç dizi olacak şekilde gruplandırılmış bir çubuk grafik oluşturmaya çalışıyorum, ve her birinde 6 örnek olacak. Dizinin her birinin, arka uçtan aktarılan bilgilere dayanarak kendi Y eksenine (birincil veya ikincil) göre olmasını istiyorum. Örneğin, serilerden biri AxisType = "1" içeriyorsa, Sol Y Ekseni ile ilgili olacaktır, eğer AxisType = "2" ise, Sağ Y Ekseni ile ilgili olacaktır. İstediğim sonuca kendim ulaşmaya çalıştım, ancak senaryoyu dikdörtgenlerin oluşturduğu yerde sıkıştım. Aşağıdaki sonuca bakarak, dizinin sonunu (yeşil çubuklar) ikinci Y ekseniyle nasıl ilişkilendirebilirim, ilkini değil? di olduğu veri olduğud3.js, iki Y ekseni ile gruplandırılmış çubuk grafik, Y1 veya Y2 ile ilgili seri
function (d, i, j) { .... }
: Anonim işlevler de üç parametre olabileceğini unutmamak gerekir :
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>