如何在d3.js中设置条形图中每个条形的左上点为图案原点？

tjvv9vkg 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(128)

我创建了一个条形图，并使用图案填充它。对于每个图案，我设置x=0和y=0，但我不知道这个（0，0）点在哪里，所以我不知道我的图案从哪里开始平铺。
我想把横条的左上角设定为每一横条的图样原点，如何才能做到？
Diagram of the result I want
我的代码：

<!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>

先谢谢你了。

d3.js

来源：https://stackoverflow.com/questions/72352122/how-to-set-pattern-origin-at-the-top-left-point-of-each-bar-of-a-barchart-in-d3

1条答案

按热度按时间

wfypjpf41#

你能做的，就是也用D3添加模式。D3实际上允许你添加任何类型的标记到DOM。因此，你可以做第二个join来添加模式。在下面的代码中，我只是“复制”了你的逻辑，但是现在模式在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>

赞(0）回复(0）举报 2022-11-12

我来回答

如何在d3.js中设置条形图中每个条形的左上点为图案原点？

1条答案

相关问题

热门标签

最新问答