英文:
d3 horizontal bar chart single series
问题
我有一个水平条形图，它针对一个数组系列起作用。但是我想修改它，使其看起来更像这里的图片，其中只有一个项目具有圆角边框，并且百分比值显示在侧边。
当我将数组删除只保留1个时，它占据了100%的区域。
当前代码：
// 你的 JavaScript 代码部分
新进展，通过修复域：
// 你的 JavaScript 代码部分
英文:
I've got a horizontal bar chart that works against an array series. However I want to modify this to look more akin to the picture here - where there is just 1 item rounded border with the percentage value off to the side.
When I remove the array to just 1 - it takes up 100% of the area.
current code
https://jsfiddle.net/csa1w2fm/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>multibar d3</title>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<script>
d3.select("body")
.selectAll('svg')
.remove();
var data = [{"label": "Toblerone", "value": 10}, {"label": "Mars Bar", "value": 30}];
var w = parseInt(900, 10),
h = parseInt(800, 10);
var color = d3.scaleOrdinal().range(['#046395', '#d62828', '#f77f00', '#fcbf49', '#eae2b7']);
data.forEach(function(d) {
d.total = +d.value;
});
var margin = {top: 20, right: 5, bottom: 30, left: 20};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleBand()
.range([height, 0])
.padding(0.1);
x.domain([0, d3.max(data, function(d) { return d.value; })]);
y.domain(data.map(function(d) { return d.total; }));
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr('class', 'barchart')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bars = svg.append('g').attr('class', 'bars');
bars.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr('fill', function(d, i) {
return color(i);
})
.attr("width", function(d) { return x(d.total); })
.attr("y", function(d) { return y(d.value); })
.attr("height", y.bandwidth());
bars.selectAll(".label")
.data(data)
.enter().append("text")
.attr("class", "label")
.attr('text-anchor', function(d) {
return d.total <= 20 ? 'start' : 'end';
})
.attr("x", function(d) {
return d.total <= 20 ? x(d.total) + 20 : x(d.total) - 20;
})
.attr("y", function(d) {
return y(d.value) + y.bandwidth() / 2;
})
.attr("dy", 5)
.text(function(d) {
return d.label;
});
bars.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
bars.append("g")
.call(d3.axisLeft(y));
</script>
</body>
</html>
<!-- end snippet -->
new progress by fixing the domain
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>multibar d3</title>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<script>
d3.select("body")
.selectAll('svg')
.remove();
var data = [{"label": "Toblerone", "value": 70}];
var w = parseInt(280, 10),
h = parseInt(80, 10);
var color = d3.scaleOrdinal().range(['#046395', '#d62828', '#f77f00', '#fcbf49', '#eae2b7']);
data.forEach(function(d) {
d.total = +d.value;
});
var margin = {top: 20, right: 10, bottom: 20, left: 20};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleBand()
.range([height, 0])
.padding(0.1);
x.domain([0, 100])
y.domain(data.map(function(d) { return d.total; }));
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr('class', 'barchart')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bars = svg.append('g').attr('class', 'bars');
bars.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr('fill', function(d, i) {
return color(i);
})
.attr("width", function(d) { return x(d.total); })
.attr("y", function(d) { return y(d.value); })
.attr("height", y.bandwidth());
bars.selectAll(".label")
.data(data)
.enter().append("text")
.attr("class", "label")
.attr('text-anchor', function(d) {
return d.total <= 20 ? 'start' : 'end';
})
.attr("x", function(d) {
return d.total <= 20 ? x(d.total) + 20 : x(d.total) - 20;
})
.attr("y", function(d) {
return y(d.value) + y.bandwidth() / 2;
})
.attr("dy", 5)
.text(function(d) {
return d.label;
});
bars.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
bars.append("g")
.call(d3.axisLeft(y));
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
目前，您的x比例域采用数组的最小值和最大值。
只需将x比例域更改为 x.domain([0, 100]);。
这样，比例的跨度将从0到100，与其range一起。
英文:
Currently, your x scale domain take min and max value of your array.
Just changes the x scale domain to x.domain([0, 100]);.
So that the span of the scale goes from 0 to 100 alongside it's range
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论