带有重要性星的条形图答案

【问题标题】：Bar Chart with significance stars带有重要性星的条形图
【发布时间】：2014-12-28 19:09:31
【问题描述】：

我是 d3 js 的新手。

我想创建一个简单的条形图，带有带有星号的重要性条，如下所示。

我该怎么做呢？显然，我可以按照文档中的示例制作普通的条形图，但我在条形/星号方面特别欠缺。

谢谢

【问题讨论】：

标签： javascript d3.js bar-chart

【解决方案1】：

对于这种习惯，我会自己画paths。例如，我在大约 15 分钟内把它放在一起。请注意，我捏造了误差条计算，它假设第一个条是最高的。

  svg.selectAll(".errorBar")
    .data(data)
    .enter()
    .append("path")
    .attr("d", function(d, i) {
      var rV = "";
      if (i === 0) {
        rV += "M" + (x(d.letter) + x.rangeBand() * 0.5) + " " + y(d.value);
        rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - ((data.length - 1) * 25));
        return rV;
      }
      var errorY = (y(d.value) - y(d.value) / 6);
      rV += "M" + (x(d.letter) + x.rangeBand() * 0.5) + " " + y(d.value);
      rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + errorY;
      rV += "M" + (x(d.letter) + x.rangeBand() * 0.25) + " " + errorY;
      rV += "L" + (x(d.letter) + x.rangeBand() * 0.75) + " " + errorY;
      rV += "M" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (errorY - 10);
      rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - (i * 25));
      rV += "M" + (x(firstValue.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - (i * 25));
      rV += "L" + (x(d.letter) + x.rangeBand() * 0.5) + " " + (y(firstValue.value) - (i * 25));
      return rV;

    })
    .attr("stroke", "black")
    .attr("stroke-width", 2)


  svg.selectAll(".starText")
    .data(data.filter(function(d,i){ return i > 0; }))
    .enter()
    .append('text')
    .attr('dx',function(d,i){
      return ((x(d.letter) + x.rangeBand()) / 2);
    })
    .attr('y', function(d,i){
      return y(firstValue.value) - ((i+1) * 25);
    })
    .style('text-anchor', 'start')
    .text('****')

例如here。

看起来像：

【讨论】：