Question

我正在尝试使用带有双轴和分组图表的D3条形图有3个数据字段 1个名字 2个数量 3 linenetamount

我的数据来自API但我们可以提供样本数据 -

name,qty,linenetamount
a1,12,345
a2,45,546
a3,87,5555
a4,444,66789

请查看我的js部分代码 - .................................

                var margin = { top: 20, right: 40, bottom: 30, left: 40 },
               width = 980 - margin.left - margin.right,
               height = 500 - margin.top - margin.bottom;
                  var x0 = d3.scale.ordinal().rangeRoundBands([0, width], .4);
                  var x1 = d3.scale.ordinal();
                  var y0 = d3.scale.linear().range([height, 0]);
                  var y1 = d3.scale.linear().range([height, 0]);

                  var color = d3.scale.ordinal().range(["#98abc5", "#d0743c"]);

                  var xAxis = d3.svg.axis()
                      .scale(x0)
                      .orient("bottom")
                      .ticks(5);

                  var yAxisLeft = d3.svg.axis()
                      .scale(y0)
                      .orient("left")
                      .tickFormat(function (d) { return parseInt(d) });

                  var yAxisRight = d3.svg.axis()
                      .scale(y1)
                      .orient("right")
                      .tickFormat(function (d) { return parseInt(d) });

                  var svg = d3.select($el[0]).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 + ")");


                  x0.domain(data.map(function (d) { return d.name; }));
                  x1.domain(['qty', 'linenetamount']).rangeRoundBands([0, x0.rangeBand()]);

                  y0.domain([0, d3.max(data, function (d) { return d.qty; })]);
                  y1.domain([0, d3.max(data, function (d) { return d.linenetamount; })]);

                  // Ticks on x-axis and y-axis
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);

                  svg.append("g")
                      .attr("class", "y0 axis")
                      .call(yAxisLeft)
                    .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .style("fill", "#98abc5")
                      .text("qty");

                  svg.select('.y0.axis')
                    .selectAll('.tick')
                      .style("fill", "#98abc5");

                  svg.append("g")
                      .attr("class", "y1 axis")
                      .attr("transform", "translate(" + width + ",0)")
                      .call(yAxisRight)
                    .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", -16)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .style("fill", "#d0743c")
                      .text("linenetamount");

                  svg.select('.y1.axis')
                    .selectAll('.tick')
                      .style("fill", "#d0743c");
                  // End ticks

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

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

                  // Legend
                  var legend = svg.selectAll(".legend")
                      .data(['qty', 'linenetamount'].slice())
                      .enter()
                      .append("g")
                        .attr("class", "legend")
                        .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });

                  legend.append("rect")
                      .attr("x", width - 48)
                      .attr("width", 18)
                      .attr("height", 18)
                      .style("fill", color);

                  legend.append("text")
                      .attr("x", width - 54)
                      .attr("y", 9)
                      .attr("dy", ".35em")
                      .style("text-anchor", "end")
                      .text(function (d) { return d; });

它生成具有双轴的图表但我的条形值对于所有记录都是相同的。

任何解决此问题的建议。谢谢。

带有双轴和组合条的D3图表

0 个答案: