D3图表工具:无法在条形图中显示列上的标签
D3图表工具:无法在条形图中显示列上的标签
提问于 2019-11-26 15:01:05
我知道建议为每一个人提出一个不同的问题，但最后期限太短，所以我选择了这个选择。我真的很抱歉，并要求专家的意见。
我是全新的D3图表工具。到目前为止，我已经成功地使用v4呈现了以下图表
wp_enqueue_script( 'd3-chart', 'https://d3js.org/d3.v4.min.js' );
但是，有一个困难的时间来得到以下的东西去工作！我一定做错了什么，但不知道那是什么。
每个条形/列上的标签
我通过引用这把小提琴尝试了下面的代码，但是标签永远不会出现！
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点，我参考了这教程，并尝试了以下步骤。但这是行不通的。
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图的检验结果
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-26 16:14:48
如果没有完整的代码，就很难确定到底发生了什么，但是有一条金科玉律可以让你自己发现自己，还有一些事情需要思考和尝试：
黄金规则
检查DOM中实际发生了什么(请查看https://developers.google.com/web/tools/chrome-devtools/dom，以防您不知道我的意思是什么)是否将标签添加到您的<svg>中，而不是在正确的位置，在这种情况下，它们在哪里，以及计算中发生了什么错误？或者他们完全丢失了，在这种情况下，您的选择或您试图绑定到的数据有什么问题吗？
从监视代码开始尝试的东西
- 当您选择要绑定数据指向的文本元素(即
svg.selectAll("text"))时，这将将您的数据绑定到文档中的任何现有<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;吗？也许它们就在那里，但造型却让你看不见它们？
希望至少有一些帮助！
Stack Overflow用户
发布于 2019-11-26 16:00:33
我在显示文本方面做了一个小小的改动。
如下所示
//set the label
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4)-5;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");在d3上，我们需要从高度减去。工作小提琴在这里小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59053726
复制相关文章
相似问题
腾讯云开发者
