根据数据属性更改d3.js符号大小

Question

我正在尝试根据数据集中的属性“ WinsNoms”的值来缩放符号的大小。 该图表将被渲染，但不会根据“ winsNoms”进行缩放。 谁能帮我我在哪里错了？

var sizeExtent = d3.extent(data, function(d) { return d.WinsNoms });
var sizeScale = d3.scale.linear()
                .domain(sizeExtent)
                .range([5,15]);

var symbolTypesx = {
    "cross": d3.svg.symbol().type("cross").size(function(d) { return sizeScale(d.WinsNoms);}),
    "circle": d3.svg.symbol().type("circle").size(function(d) { return sizeScale(d.WinsNoms);})
};

svg2.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("class", "dot")
    // position it, can't use x/y on path, so translate it
    .attr("transform", function(d) { 
        return "translate("+xScale(d.imdbRating)+","+yScale(d.imdbVotes)+")"; 
    })
   .attr("d", function(d,i){
        if (d.IsGoodRating === 0)
        { // circle if bar === 0
            return symbolTypesx.circle();
        }
        else
        {
            return symbolTypesx.cross();
        }
    })
    // fill based on goo and foo
   .style("fill", function(d,i){
        if (d.IsGoodRating === 0)
                return "red";
            else
                return "blue";
    });

Answer 1

调用它时，需要将基准传递到symbol函数中：

return symbolTypesx.circle(d);

运行代码：

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> </head> <body> <script> var svg2 = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 500); var data = [{ WinsNoms: Math.random(), GoodRathing: Math.random() > 0.5 ? 1 : 0 }, { WinsNoms: Math.random(), GoodRathing: Math.random() > 0.5 ? 1 : 0 }, { WinsNoms: Math.random(), GoodRathing: Math.random() > 0.5 ? 1 : 0 }, { WinsNoms: Math.random(), GoodRathing: Math.random() > 0.5 ? 1 : 0 }, { WinsNoms: Math.random(), GoodRathing: Math.random() > 0.5 ? 1 : 0 }]; var sizeExtent = d3.extent(data, function(d) { return d.WinsNoms }); var sizeScale = d3.scale.linear() .domain(sizeExtent) .range([5, 250]); var symbolTypesx = { "cross": d3.svg.symbol().type("cross").size(function(d) { return sizeScale(d.WinsNoms); }), "circle": d3.svg.symbol().type("circle").size(function(d) { return sizeScale(d.WinsNoms); }) }; svg2.selectAll("path") .data(data) .enter() .append("path") .attr("class", "dot") .attr("transform", function(d,i) { return "translate(" + ((i * 20) + 10) + "," + ((i * 20) + 10) + ")"; }) .attr("d", function(d, i) { if (d.IsGoodRating === 0) { // circle if bar === 0 return symbolTypesx.circle(d); } else { return symbolTypesx.cross(d); } });; </script> </body> </html>

根据数据属性更改d3.js符号大小

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-09-23 18:37:18

根据数据属性更改d3.js符号大小

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-09-23 18:37:18

解决方案1
2 已采纳 2018-09-23 18:37:18