我正在尝试制作一个 d3js 版本 5 的单杠,其中包含三种颜色:60% 红色、30% 黄色和 10% 绿色。有什么想法吗?
我不确定我是必须创建三个矩形元素并对齐它们,还是创建一个矩形并尝试使用 CSS 属性更改颜色。我不想使用渐变...
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.first {
fill: #ffff00;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<script>
var svgWidth = 600, svgHeight=400;
scaleFactor = 20;
var data = [100];
var svg = d3.select("body")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 300]);
var bar = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + scaleFactor + ")";
});
bar.append("rect")
.attr("class", "first")
.attr("width", function(d) {
return d;
})
.attr("height", 20)
.attr("rx", 25)
.attr("ry", 25);
</script>
</body>
</html>
最佳答案
要按顺序放置矩形,我们可以使用的一种方法是指定每个条的属性(如果我们事先知道它们):
var data = [
{ start: 90, end: 100, color: "lightgreen" },
{ start: 60, end: 90, color: "yellow" },
{ start: 0, end: 60, color: "crimson" }
];
有了数据数组中的三个元素,我们可以使用回车选择在 SVG 中放置三个矩形。
我们也可以根据提供的数字 60、30、10,通过一些操作以编程方式导出开始和结束信息,但为了演示,我将只使用上面的数据数组:
var svgWidth = 600, svgHeight=400;
scaleFactor = 20;
var data = [
{ start: 90, end: 100, color: "lightgreen" },
{ start: 60, end: 90, color: "yellow" },
{ start: 0, end: 60, color: "crimson" }
];
var svg = d3.select("body")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var x = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.end; })])
.range([0, 300]);
var bar = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform","translate(0," + scaleFactor + ")");
bar.append("rect")
.attr("class", "first")
.attr("width", function(d) {
return x(d.end - d.start); // get the width
})
.attr("x", function(d) {
return x(d.start); // get the start position
})
.attr("fill", function(d) { return d.color; })
.attr("height", 20);
<script src="https://d3js.org/d3.v5.min.js"></script>
如果您真的想要圆 Angular ,我们可以使用剪辑路径 - 因为 rect
的 rx 和 ry 属性应用于所有 Angular :
var svgWidth = 600, svgHeight=400;
scaleFactor = 20;
var data = [
{ start: 90, end: 100, color: "lightgreen" },
{ start: 60, end: 90, color: "yellow" },
{ start: 0, end: 60, color: "crimson" }
];
var svg = d3.select("body")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var x = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.end; })])
.range([0, 300]);
var clip = svg.append("clipPath")
.attr("id","clip")
.append("rect")
.attr("width", 300) // width
.attr("height", 20)
.attr("rx", 12)
.attr("ry", 12);
var bar = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform","translate(0," + scaleFactor + ")");
bar.append("rect")
.attr("class", "first")
.attr("width", function(d) {
return x(d.end - d.start); // get the width
})
.attr("x", function(d) {
return x(d.start); // get the start position
})
.attr("fill", function(d) { return d.color; })
.attr("height", 20)
.attr("clip-path","url(#clip)");
<script src="https://d3js.org/d3.v5.min.js"></script>
如果您真的想使用 css 而不是 d3 来设置矩形的样式,您可以指定一个标识符来为条形图着色或使用标准的 css 选择器,例如 nth-of-type
:
var svgWidth = 600, svgHeight=400;
scaleFactor = 20;
var data = [
{ start: 90, end: 100, id: "green"},
{ start: 60, end: 90, id: "yellow"},
{ start: 0, end: 60, id: "red"}
];
var svg = d3.select("body")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var x = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.end; })])
.range([0, 300]);
var clip = svg.append("clipPath")
.attr("id","clip")
.append("rect")
.attr("width", 300) // width
.attr("height", 20)
.attr("rx", 12)
.attr("ry", 12);
var bar = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform","translate(0," + scaleFactor + ")");
bar.append("rect")
.attr("class", "first")
.attr("width", function(d) {
return x(d.end - d.start); // get the width
})
.attr("x", function(d) {
return x(d.start); // get the start position
})
.attr("id", function(d) { return d.id; })
.attr("height", 20)
.attr("clip-path","url(#clip)");
#green {
fill: lightgreen;
}
#red {
fill: crimson;
}
#yellow {
fill: yellow;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
关于javascript - D3js单单杠三种颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51216090/