如何让条形在 d3.js 中有不同的模式？

Question

我有一个从 .csv 创建的条形图，并在 d3.js 中创建了三种模式。我如何应用这三种模式来填充每个条形？

Diagram for the result I want

CSV I used: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>

Answer 1

试试这个。使用柱的索引指定哪种形态：

.attr("fill", function(d,i) { return  "url(#pattern" + (i+1) +")");

一栏的更新。 i 只是柱的从左到右的索引，因此请使用您选择的索引上的模式。对于第二个柱：

.attr("fill", function(d,i) { return i == 1 ? "url(#pattern" + (i+1) +")" : "steelblue");

如何让条形在 d3.js 中有不同的模式？

How to make bars have different patterns in d3.js?

html

javascript

css

svg

d3.js