javascript - D3 图表工具 : Cannot display labels above columns in bar chart

Question

我知道建议为每个问题创建一个不同的问题，但截止日期太短，所以我选择了这个选项。对此我感到非常抱歉，并请求专家的建议。

我对 D3 完全陌生图表工具。到目前为止，我已经设法使用 v4 呈现以下图表:

wp_enqueue_script( 'd3-chart', 'https://d3js.org/d3.v4.min.js' );

但是很难让下面的东西起作用!我一定是做错了什么，但不知道那是什么。

每个栏/列上方的标签
我通过引用 this fiddle 尝试了以下代码，但标签永远不会出现!

svg.selectAll("rect")
   .data(data)
   .enter().append("rect")
   .attr("x", function(d) { return x(d.month); })
   .attr("width", x.bandwidth())
   .attr("y", function(d) { return y(d.points); })
   .attr("height", function(d) { return height - y(d.points); })
   .attr("fill", function(d){return barColor(d.data_month_number, d.current_month_number)});

//set the label
svg.selectAll("text")
   .data(data)
   .enter()
   .append("text")
   .text(function(d) {
      return d.points;
   })
   .attr("text-anchor", "middle")
   .attr("x", function(d, i) {
      return i * (w / data.length) + (w / data.length - barPadding) / 2;
   })
   .attr("y", function(d) {
      return h - (d.points * 4) + 14;
   })
   .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "black");

控制 Y 轴刻度值
理想情况下，最上面的行应该大于最大的列值，对我来说是 23。但它停在 20。我提到了 this教程并尝试了以下内容。但它不起作用。

function make_y_gridlines() {
   return d3.axisLeft(y)
    .ticks(7)
    .tickValues([0, 5, 10, 15, 20, 25, 30]);
}

...

svg.append("g")
  .attr("class", "grid")
  .call(make_y_gridlines()
    .tickSize(-width)
  );

我用于呈现图表的以下 JSON:

[{
    "target_goal": 7, // This is to be used for the additional horizonal line (Target Goal)
    "current_month_number": 11,
    "data_month_number": 4,
    "month": "Apr-19", // Used as X-Axis label and they are coming up correctly
    "points": 3  // Columns are rendering fine but cannot display as labels above each
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 5,
    "month": "May-19",
    "points": 3
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 6,
    "month": "Jun-19",
    "points": 5
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 7,
    "month": "Jul-19",
    "points": 7
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 8,
    "month": "Aug-19",
    "points": 6
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 9,
    "month": "Sep-19",
    "points": 4
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 10,
    "month": "Oct-19",
    "points": 23
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 11,
    "month": "Nov-19",
    "points": 7
}, {
    "target_goal": 7,
    "current_month_number": 11,
    "data_month_number": 12,
    "month": "Dec-19",
    "points": 7
}]

编辑

最终图表需要如下所示。

更新(11 月 27 日)

我的图表检查结果。没有 <text>被渲染!

Fiddle图检查结果

Answer 1

如果没有完整的代码，就很难确定到底发生了什么，但有一条黄金法则可以让你自己找到答案，还有一些事情需要思考和尝试:

黄金法则

检查 DOM 中实际发生了什么(查看 https://developers.google.com/web/tools/chrome-devtools/dom，以防您不确定我的意思)是否已将标签添加到您的 <svg>只是不在正确的地方，在这种情况下，他们在哪里，计算中出了什么问题？或者它们完全丢失了，在这种情况下，您的选择或您尝试绑定(bind)到它的数据有问题吗？

通过观察您的代码可以尝试的事情

• 当您选择要将数据点绑定(bind)到的文本元素(即 svg.selectAll("text") )时，这会将您的数据绑定(bind)到任何现有的 <text>文档中的元素，所以如果这是在添加坐标轴之后发生的，您可能会得到一些非常奇怪的选择，最终无意中进行了修改。相反，我会做这样的事情，以便它只适用于您要添加的标签:

svg.selectAll(".data-labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class","data-labels")
    .text(function(d) {
        return d.points;
     })

• y 位置的函数，return h - (d.points * 4) + 14;闻起来有点奇怪——记住这是页面上的 y 位置而不是数据的 y 值，所以你不使用 y(d.points) 感觉有点奇怪在它的任何地方。如果您想添加偏移量而不是减去偏移量，我也会感到惊讶(记住 y 是从顶部而不是底部测量的!)您的意思是 return h - y(d.points) - 14; ？也许它们就在那里，但设计得让您看不到它们？

希望至少有一些帮助!