X& Y堆叠图中选择性条的坐标 [英] X & Y Co-ordinates of selective bars in a stack graph

问题描述

我有一个堆叠的条形图。

I have a stacked bar chart. And I'd like a draw a line like grouping few bars of a stacked bar chart.

像这样的东西。

为此，我需要找到 y 第二个和最后一个栏的坐标。

So to do this I need to find the y coordinate of the 2nd and the last bar.

有人请帮助使用d3绘制这些线。

Some one please help in drawing those line using d3.

JS：

var width = 750,
      height = 500;

  var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);

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

  var color = d3.scale.ordinal()
                .range(["#D70B16", "#154CEF", "#1A8A55"]);

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

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

  var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function(d) {
            return "Value: " + (d.y1 - d.y0) + "";
            })

  var svgContainer = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .append("g")
                        .attr("transform", "translate(" + 30 + "," + 30 + ")");


  d3.csv("data.csv", function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "circle"; }));

    data.forEach(function(d) {
      var y0 = 0;
      d.hours = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

      d3.select('body').append('pre')
              .text(JSON.stringify(d.hours, null, '  '));


      d.total = d.hours[d.hours.length - 1].y1;
    });

    x.domain(data.map(function(d) {return d.circle;}));
    y.domain([0, d3.max(data, function(d) {return d.total;})])

    svgContainer.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

    svgContainer.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Login Hours");

    var circle = svgContainer.selectAll(".circle")
                    .data(data)
                    .enter().append("g")
                    .attr("class", "g")
                    .attr("transform", function(d) { return "translate(" + x(d.circle) + ",0)"; });

    circle.selectAll("rect")
          .data(function(d) { return d.hours; })
          .enter()
          .append("rect")
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.y1); })
          .attr("height", function(d) { return y(d.y0) - y(d.y1); })
          .on("mouseover", tip.show)
          .on("mouseout", tip.hide)
          .style("fill", function(d) { return color(d.name); });


    circle.selectAll("text")
          .data(function(d) { return d.hours; })
          .enter()
          .append("text")
          .attr("x", 75)
          .attr("y", function(d, i) { return y(d.y1) ; })
          .style("text-anchor", "middle")
          .text("test")

  })

推荐答案

如何确定这些值（和条）取决于如何识别它们。在这种特殊情况下，你实际上不需要得到 rect 项，因为底层数据可以访问你需要的一切。

How you determine those values (and the bars) depends on how you can identify them. In this particular case, you don't actually need to get the rect items because the underlying data gives you access to everything you need.

例如，获取第一列中第二个栏的 y 坐标，您可以使用以下代码：

To, for example, get the y coordinate of the second bar in the first column, you can use the following code:

var yCoord = y(data[0].hours[1].y1);

这篇关于X& Y堆叠图中选择性条的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！