Question

我有一个分组/聚集的条形图，我正在尝试向其添加一条线（带点）。我可以使用单个非聚集条形图来执行此操作，而不能使用聚类的条形图来完成此操作。

这是fiddle，其中包含标准条形图的工作示例。

以下是fiddle，显示了我尝试在群集条形图中添加一条线的尝试：-（

任何指导将不胜感激。

var margin = {top: 20, right: 10, bottom: 60, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.4);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["#FC654C", "#CCCCCC"]);

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));


var svg = d3.select("#chart").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 + ")");

var data = [
  { xx: "A", A: "10", B: "15", C: "19" },
  { xx: "B", A: "12", B: "18", C: "9" },
  { xx: "C", A: "05", B: "20", C: "5" },
  { xx: "D", A: "01", B: "15", C: "7" },
  { xx: "E", A: "02", B: "10", C: "13" }
];


var data2 = d3.keys(data[0]).filter(function(key) { return key == "A" || key == "B"   ; });

data.forEach(function(d) {
    d.dataNew = data2.map(function(name) {
        //console.log(name + ':' + d[name]);
        return {
            name: name,
            value: +d[name]
        };
    });
});


  x0.domain(data.map(function(d) { return d.xx; }));
  x1.domain(data2).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.dataNew, function(d) { return d.value; }); })]);


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


     //rectangle 
svg.selectAll(".xx")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + (x0(d.xx)) + ",0)"; })

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


        //image
       svg.selectAll(".images")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + (x0(d.xx)) + ",0)"; })

      .selectAll("rect")
      .data(function(d) { return d.dataNew; })
        .enter()
      .append("svg:image")

       .attr("x", function(d) { return x1(d.xx )  } )
        .attr("y", height + margin.bottom-40)
        .attr("width", x1.rangeBand())
        .attr("height", 40)
       .attr("xlink:href", function(d){return "http://pngimg.com/uploads/football/football_PNG52789.png"}) 


   var valueline = d3.svg.line()
    .x(function (d) { return x(d.xx) + x.rangeBand()/2; })
    .y(function (d) { return y(d.C) ; });


  svg.append("path")
    .attr({
            'd': valueline(data),
            'stroke': 'black',
            'stroke-dasharray': 5,
            'stroke-width': 2,
            'fill': 'none'});


  svg.append("g")
      .selectAll("dot")
      .data(data)
      .enter()
      .append("circle")
        .attr("cx", function (d) { return x(d.xx) + x.rangeBand()/2; })
        .attr("cy", function (d) { return y(d.c) ; })
        .attr("r", 5)
        .style("fill", "orange" )

Answer 1

定义valueline时，似乎未定义您要使用的比例（x）。您是不是要像这样x0那样使用刻度尺.x(function (d) { return x0(d.xx) + x0.rangeBand()/2; })？

d3.js添加折线并指向分组/聚集的条形图

1 个答案: