Question

我有一个使用d3.js lib从geojson创建的地图，我随机地绘制了不同的地图状态。现在，当我将鼠标悬停在鼠标悬停功能中时，我希望获得状态颜色：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <title>Menu Page</title>

    <link rel="stylesheet" href="css/style.css">
 </head>

是否可以从d获取颜色，以便当我从这个状态鼠标输出时返回到这种颜色？

Answer 1

在on函数中，this指的是DOM元素。因此，如果您使用style设置颜色，则可以使用style作为吸气剂获得相同的颜色：

.on('mouseover', function(d){
    console.log(d3.select(this).style("fill"))//'style' as a getter
});

检查此演示，将鼠标悬停在状态上（我使用Math.random()设置颜色）：

＆＃13;

var width = 720,
    height = 375;

var colorScale = d3.scale.category20();

var projection = d3.geo.albersUsa()
    .scale(800)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


d3.json("https://dl.dropboxusercontent.com/u/232969/cnn/us.json", function(error, us) {


    svg.selectAll(".state")
        .data(topojson.feature(us, us.objects.states).features)
        .enter().append("path")
        .attr("d", path)
        .style('fill', function(d) {
            return colorScale(Math.random() * 20)
        })
        .attr('class', 'state')
        .on('mouseover', function(d) {
            console.log(d3.select(this).style("fill"))
        });

    svg.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) {
            return a !== b;
        }))
        .attr("d", path)
        .attr("class", "state-boundary");

});

＆＃13;

.land {
  fill: #222;
}

.county-boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.state-boundary {
  fill: none;
  stroke: #fff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

＆＃13;

编辑：我必须承认，当您第一次发布问题时，我只会读到您问题的标题（＆＃34;如何在鼠标悬停时找到状态的颜色＆＃34;）。现在，在正确阅读了帖子的文本之后，我认为解决方案更容易（顺便说一下，＆＃34;保留州的颜色＆＃34;确实是问题的更好标题）。

如果您使用数据中的任何属性设置颜色（例如，id）：

.style('fill', function(d){
    return colorScale(d.id)
})

您只需在＆＃34; mouseout＆＃34;：

中再次设置它

.on('mouseover', function(d) {
    d3.select(this).style("fill", "orange")
}).on("mouseout", function(d) {
    d3.select(this).style('fill', function(d) {
        return colorScale(d.id)
    })
});

查看其他演示：

＆＃13;

var width = 720,
    height = 375;
    
var colorScale = d3.scale.category20();

var projection = d3.geo.albersUsa()
    .scale(800)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


d3.json("https://dl.dropboxusercontent.com/u/232969/cnn/us.json", function(error, us) {
      
    
    svg.selectAll(".state")
        .data(topojson.feature(us, us.objects.states).features)
        .enter().append("path")
        .attr("d", path)
        .style('fill', function(d){
            return colorScale(d.id)
        })        
        .attr('class', 'state')
        .on('mouseover', function(d){
        	d3.select(this).style("fill", "orange")
        }).on("mouseout", function(d){
        d3.select(this).style('fill', function(d){
            return colorScale(d.id)
        })});
    
    svg.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) {
            return a !== b;
        }))
        .attr("d", path)
        .attr("class", "state-boundary");
 
});

＆＃13;

.land {
  fill: #222;
}

.county-boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.state-boundary {
  fill: none;
  stroke: #fff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

＆＃13;

在d3中保留鼠标悬停功能中的状态颜色

1 个答案: