Jquery 具有双轴和组条的D3图表

我正在尝试使用D3条形图与双轴和分组图 有3个数据字段 1名 2数量 3线网架

我的数据来自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; });

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

任何解决这个问题的建议。

---

谢谢。

请共享您的数据。有问题的示例数据更新这里有一个可能的解决方案：这里的问题是为RECT重新绑定数据。感谢它在需要时的工作