CODEWITHSUNDEEP
javascripttypescriptd3.jssvg
Marc Pincince
Marc Pincince

Reputation: 5202

How to set the size of a d3 symbol?

I can't figure out how to set the size of my d3 symbols in this:

        legendRectE
            .append('path')
            .attr("d", d3.svg.symbol().type((d) => { return d[2] }))
            .style("fill", function (d) {
                return d[1];
            })
            .attr('stroke', 'black');

I tried to use .size() like this, but it didn't work:

        legendRectE
            .append('path')
            .attr("d", d3.svg.symbol().type((d) => { return d[2] }))
            .style("fill", function (d) {
                return d[1];
            })
            .attr('stroke', 'black')
            .size(20*20);

When I try using .size() like that, I get an error: [ts] Supplied parameters do not match any signature of call target.

So how can I set the size of my symbols in this case?

Upvotes: 7

Views: 5995

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

You have to define the size in the symbol generator (the d3.svg.symbol function):

d3.svg.symbol().size(size).type(foo);
//size here-----------^

Here is a demo:

var svg = d3.select("svg");

var sizes = ["10", "50", "100", "200", "500", "1000", "2000"];

sizes.forEach((d, i) => {
  svg.append('path')
    .attr("transform", "translate(" + (10 + (i+1) * (i+1) * 5) + ",100)")
    .attr("d", d3.svg.symbol().size(d).type("diamond"))
    .style("fill", "gold")
    .attr('stroke', 'black');
});
<script src="https://d3js.org/d3.v3.js"></script>
<svg></svg>

Upvotes: 10

Related Questions