Question

我有以下内容为每个数据点创建两个圆圈，基于纬度，经度。圆圈的大小和颜色不同。我喜欢＆＃34;填充＆＃34;在circles1中，基于colorScale返回的颜色渐变值。但是，圆圈看起来只是黑色。我在这里弄错了什么？

d3.csv("cities-lived.csv", function(data) {

var colorScale = d3.scale.linear()
    .domain([-15, 7.5, 30])
    .range(["#2c7bb6", "#ffff8c", "#d7191c"])
    .interpolate(d3.interpolateHcl);

var circles1 = svg.selectAll("foo")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
    })
    .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
    })
    .attr("r", function(d) {
        return Math.sqrt(d.years * 2);
    })
    .style("fill", function(d) {
        return colorScale(d.temp);
    })    
        .style("opacity", 0.85) 

.on("mouseover", function(d) {      
        div.transition()        
           .duration(200)      
           .style("opacity", .9);      
           div.text(d.place)
           .style("left", (d3.event.pageX) + "px")     
           .style("top", (d3.event.pageY - 28) + "px");    
    })   

    // fade out tooltip on mouse out               
    .on("mouseout", function(d) {       
        div.transition()        
           .duration(500)      
           .style("opacity", 0);   
    })

var circles2 = svg.selectAll("foo")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
    })
    .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
    })
    .attr("r", function(d) {
        return Math.sqrt(d.avg * 2);
    })
        .style("fill", "none")    
        .style("opacity", 0.85) 
        .style("stroke", "black")
        .style("stroke-width", "2");

    // Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks" 
    // http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

});

用这个（如下所示）代替.style（＆＃34;填充＆＃34;，功能（d）......完美无缺。

    .style("fill", "rgb(217,91,67)")

以上代码基于http://blockbuilder.org/anonymous/0e1213b567bcfc74376cc0e9a7238c1b，色阶功能基于http://bl.ocks.org/nbremer/a43dbd5690ccd5ac4c6cc392415140e7。

Answer 1

您的代码运行正常，您的问题必须来自您的数据：

.style("fill", function(d) {
    return colorScale(d.temp);
})

d.temp必须为undefined

我做了一个小提琴作为例子https://jsfiddle.net/ddspczr1/

d3颜色渐变线性刻度不起作用

1 个答案: