javascript - 在条形图中的 <rect> 两端添加标签

Question

我正在使用 D3 将一些数据呈现为水平条形图。值通常在 8 个不同的尺度上介于 -10 和 +10 之间。我已经按照我想要的方式渲染了条形图，但我无法弄清楚如何为轴的每个极值添加标签。

到目前为止我已经:

但我想实现类似的目标:

换句话说，每个尺度的每个极端都有一个标签。 我发现了很多向条形图本身添加数据标签的示例(例如值)，但我想知道如何强制在容器的极端处呈现字符串数组。

目前，我正在渲染数组中的数据，并且我将标签存储在另外 2 个数组中，例如

var data = [10, 5, -5, -10, 2, -2, 8, -8];
var leftLabels = ["label 1","label 2", ...];
var rightLabels = ["label 1", "label 2", ...];

欢迎任何想法或示例链接。

Answer 1

我不是d3.js方面的专家，但我认为这很容易做到。有不同的方法可以解决这个问题。我创建了一个pen对于您的用例。

我将粘贴下面代码的重要部分。在您的图表中，您肯定需要进行一些调整以满足您的需求。随意调整这些值，直到您感觉它们稳定为止。

// Your array containing labels for left and right values

var leftSideData = ["left1", "left2", "left3", "left4", "left5", "left6", "left7", "left8"];

var rightSideData = ["right1", "right2", "right3", "right4", "right5", "right6", "right7", "right8"];

var left = svg.selectAll(".leftData")
    .data(leftSideData)
    .enter().append("g")
    .attr("class", "leftVal")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 57 + ")";
    });

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

  var right = svg.selectAll(".rightData")
    .data(rightSideData)
    .enter().append("g")
    .attr("class", "rightVal")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 57 + ")";
    });

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

我不会说这是完美的，但我希望您了解如何实现它。祝一切顺利!!