D3 - 在垂直条形图中的矩形顶部获取文本 [英] D3 - Getting text on the top of rectangles in Vertical Bar chart
本文介绍了D3 - 在垂直条形图中的矩形顶部获取文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在做一个垂直条形图与D3成功。我还希望频率的值位于每个矩形的顶部。我能够得到完整的结构和矩形。但是，我看不到我的价值观在酒吧的顶部。有人可以帮助吗？
I am making a vertical bar chart with D3 successfully. I further want the value of frequency to lie on the top of each rectangle. I am able to get the complete structure and rectangles. But, I cannot see my values residing on top of the bars. Can someone help out?
SNIPPET：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<svg></svg>
<script>
//module declaration
var app = angular.module('myApp',[]);
//Controller declaration
app.controller('myCtrl',function($scope){
$scope.svgWidth = 800;//svg Width
$scope.svgHeight = 500;//svg Height
//Data in proper format
var data = [
{"letter": "A","frequency": "5.01"},
{"letter": "B","frequency": "7.80"},
{"letter": "C","frequency": "15.35"},
{"letter": "D","frequency": "22.70"},
{"letter": "E","frequency": "34.25"},
{"letter": "F","frequency": "10.21"},
{"letter": "G","frequency": "7.68"},
];
//removing prior svg elements ie clean up svg
d3.select('svg').selectAll("*").remove();
//resetting svg height and width in current svg
d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);
//Setting up of our svg with proper calculations
var svg = d3.select("svg");
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
//Plotting our base area in svg in which chart will be shown
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//X and Y scaling
var x = d3.scaleBand().rangeRound([0, width]).padding(0.4);
var y = d3.scaleLinear().rangeRound([height, 0]);
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return +d.frequency; })]);
//Final Plotting
//for x axis
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", "translate(0," + height + ")");
//for y axis
g.append("g")
.call(d3.axisLeft(y))
.append("text").attr("transform", "rotate(-90)").attr("text-anchor", "end");
//for rectangles
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("y", function(d) { return y(d.frequency); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.frequency); });
g
.selectAll(".bar")
.append("text")
.attr("dy", ".75em")
.attr("y", function(d) { return y(d.frequency); })
.attr("x", function(d) { return x(d.letter); })
.attr("text-anchor", "middle")
.text(function(d) { return y(d.frequency); });
});
</script>
</body>
</html>
结果：
DOM：
因为，可以看到我的文本是添加在dom每个矩形，但不能看到。 Pls帮助他们在矩形的顶部被看到。
As, can be seen my text is added in dom per each rectangle, but cannot be seen. Pls help them being seen on top of rectangles.
推荐答案
这里的问题很简单：不能追加 / code>元素 $
The problem here is simple: you cannot append a text element inside a rect element.
code>元素将在您检查DOM时显示，但这并不意味着它工作，并且没有文本实际上会在SVG中绘制。
The text element will show up when you inspect the DOM, but this doesn't mean that it works, and no text will be actually painted in the SVG.
看看这里，我在哪里解释你的问题：正确地附加SVG元素
Have a look here, where I explain exactly your problem: Correctly appending an SVG element
因此，它应该是：
g.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("dy", ".75em")
.attr("y", function(d) { return y(d.frequency); })
.attr("x", function(d) { return x(d.letter); })
.attr("text-anchor", "middle")
.text(function(d) { return d.frequency; });
请注意，我更改了
.text(function(d) { return y(d.frequency); });
这是没有意义的：
.text(function(d) { return d.frequency; });
以下是您的代码演示：
var data = [{
"letter": "A",
"frequency": "5.01"
}, {
"letter": "B",
"frequency": "7.80"
}, {
"letter": "C",
"frequency": "15.35"
}, {
"letter": "D",
"frequency": "22.70"
}, {
"letter": "E",
"frequency": "34.25"
}, {
"letter": "F",
"frequency": "10.21"
}, {
"letter": "G",
"frequency": "7.68"
}, ];
//Setting up of our svg with proper calculations
var svg = d3.select("body")
.append("svg").attr("width", 500).attr("height", 300);
var margin = {
top: 40,
right: 20,
bottom: 40,
left: 40
};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
//Plotting our base area in svg in which chart will be shown
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//X and Y scaling
var x = d3.scaleBand().rangeRound([0, width]).padding(0.4);
var y = d3.scaleLinear().rangeRound([height, 0]);
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
return +d.frequency;
})]);
//Final Plotting
//for x axis
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", "translate(0," + height + ")");
//for y axis
g.append("g")
.call(d3.axisLeft(y))
.append("text").attr("transform", "rotate(-90)").attr("text-anchor", "end");
//for rectangles
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter);
})
.attr("y", function(d) {
return y(d.frequency);
})
.attr("width", x.bandwidth())
.attr("height", function(d) {
return height - y(d.frequency);
});
g.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("dy", ".75em")
.attr("y", function(d) {
return y(d.frequency) - 16;
})
.attr("x", function(d) {
return x(d.letter) + x.bandwidth() / 2;
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.frequency;
});
<script src="https://d3js.org/d3.v4.min.js"></script>
这篇关于D3 - 在垂直条形图中的矩形顶部获取文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
