我有一個從 .csv 創建的條形圖，并在 d3.js 中創建了三個模式。如何應用這三種模式來填充每個條？
我想要的結果圖
我使用的CSV：Year.csv
year,value
2001,10
2002,30
2003,20
這是我寫的代碼，包括條形圖和三種模式。現在條形圖用藍色填充，三種形態在圖表旁邊。
<!doctype html>
<html>
<head>
<style>
.bar {
fill: steelblue;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="600" height="500"></svg>
<svg>
<defs>
<pattern id="pattern1"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern2"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="5" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern3"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="3" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="0" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="100" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern2);" />
<rect x="200" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#pattern3);" />
</svg>
<script>
var svg = d3.select("svg"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
var xScale = d3.scaleBand().range([0, width]).padding(0.4),
yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" 100 "," 100 ")");
d3.csv("Year.csv", function(error, data) {
if (error) {
throw error;
}
xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("transform", "translate(0," height ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return d;
}).ticks(10));
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.year); })
.attr("y", function(d) { return yScale(d.value); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.value); })
.attr("fill", "url(#pattern-checkers)");
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
試試這個。使用柱的索引來指定哪種模式：
.attr("fill", function(d,i) { return "url(#pattern" (i 1) ")");
更新一個酒吧。這i只是條形圖的從左到右的索引，因此請使用您選擇的索引上的模式。對于第二個酒吧：
.attr("fill", function(d,i) { return i == 1 ? "url(#pattern" (i 1) ")" : "steelblue");
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/478559.html
標籤：javascript html css svg d3.js