我創建了一個條形圖并使用模式來填充它。對于每個模式，我設定 x=0 和 y=0，但我不知道這個 (0,0) 點在哪里，所以我不知道我的模式從哪里開始平鋪。
我想將條形的左上角設定為每個條形的模式原點。我怎樣才能做到這一點？
我想要的結果圖
我的代碼：
<!doctype html>
<html>
<head>
<style>
</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="0" y="0" 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="0" y="0" 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="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="3" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="0" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="100" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern2);" />
<rect x="200" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern3);" />
</svg>
</body>
<script>
var data = [{ year: '2001', value:10 },
{ year: '2002', value:30 },
{ year: '2003', value:20 },
]
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 ")");
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('stroke', "black")
.attr('stroke-width', '1')
.attr("fill", function(d,i) { return "url(#pattern" (i 1) ")"});
</script>
</html>先感謝您。
uj5u.com熱心網友回復：
您可以做的是也使用 D3 添加模式。D3 實際上允許您向 DOM 添加任何型別的標簽。因此，您可以進行第二次連接以添加模式。在下面的代碼中，我只是“復制”了您的邏輯，但現在模式位于 g 元素中，并且模式位置位于條形的左上角。當然，您現在可以輕松調整它，希望對您有所幫助！
<!doctype html>
<html>
<head>
<style>
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="600" height="500"></svg>
<svg>
<rect x="0" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern1);" />
<rect x="100" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern2);" />
<rect x="200" y="0" width="100" height="100"
style="stroke: #000000; fill: url(#pattern3);" />
</svg>
</body>
<script>
var data = [{ year: '2001', value:10 },
{ year: '2002', value:30 },
{ year: '2003', value:20 },
]
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 ")");
xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
g.selectAll("defs.pattern")
.data(data)
.enter()
.append("defs").append("pattern")
.classed("pattern", true)
.attr("id", (_, i) => `pattern${i 1}`)
.attr("x", (d) => xScale(d.year))
.attr("y", (d) => yScale(d.value))
.attr("width", 20)
.attr("height", 20)
.attr("patternUnits", "userSpaceOnUse")
.append("circle")
.attr("r", (_, i) => 3 * (i 1))
.attr("cx", 10)
.attr("cy", 10)
.style("stroke", null)
.style("fill", "#0000ff")
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('stroke', "black")
.attr('stroke-width', '1')
.attr("fill", function(d,i) { return "url(#pattern" (i 1) ")"});
</script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481554.html
標籤：javascript css svg d3.js 数据可视化
上一篇：顯示輸入欄位的功能組件