将鼠标悬停在切片上时更改d3.js饼图标签的颜色
changing color of d3.js pie chart label when hovering over slice?
我目前正在使用css直接在悬停时更改切片的颜色,但我想改为影响标签的颜色。我很难弄清楚如何使用d3语法来实现这一点,任何提示都将不胜感激。谢谢
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
;
arcs.append("svg:path")
.attr("fill", function(d){
console.log(d.data.label, " ", (d.endAngle - d.startAngle))
if(d.endAngle - d.startAngle > .24){
return "#00C189"
} else {
return "#E3594B"
}
})
.attr("d", arc)
.on('click', function(d){ getRSS(d.data.label); })
.on('mouseover', function(d) {
// CHANGE LABEL COLOR HERE
})
.on('mouseout', function(d){
// CHANGE LABEL COLOR BACK HERE
});
arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", function(d) { //set the label's origin to the center of the arc
d.outerRadius = outerRadius; // Set Outer Coordinate
d.innerRadius = outerRadius*.3; // Set Inner Coordinate
return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")";
})
.style("fill", "White")
.text(function(d) { return d.data.label; })
;
试试这个代码:
arcs.on("mouseover", function() {
d3.select(this)
.select("text")
.style("fill", "green");
}).on("mouseout", function() {
d3.select(this)
.select("text")
.style("fill", "black");
});
演示:
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.population;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [{
"age": "<5",
"population": 2704659
}, {
"age": "5-13",
"population": 4499890
}, {
"age": "14-17",
"population": 2159981
}, {
"age": "18-24",
"population": 3853788
}, {
"age": "25-44",
"population": 14106543
}, {
"age": "45-64",
"population": 8819342
}, {
"age": "≥65",
"population": 612463
}];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data.age);
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.data.age;
});
g.on("mouseover", function() {
d3.select(this)
.select("text")
.style("fill", "green");
}).on("mouseout", function() {
d3.select(this)
.select("text")
.style("fill", "black");
});
function type(d) {
d.population = +d.population;
return d;
}
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
相关文章:
- 如何在d3.js中返回路径的y坐标
- 有条件更新d3.js力图中节点的最佳方法
- 使用D3.js计算带有字母间距的文本长度
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- HTML5FileReader输出到D3.js图表
- D3.js生成有效的SVG,但不显示任何内容
- 更改 JS/D3 页上的元素位置
- 带有更新按钮.js D3 将新数据添加到旧数据而不是替换旧数据
- D3.js d3.max undefined
- 为什么我的 js.d3 代码不显示轴
- dc.js d3+crossfilter.top将过滤后的数据导出为CSV
- 如何在Plottable.js/D3.js制作的饼图中启用qtip2
- 2dimple.js/d3.js在窗口大小更改时自动调整图表大小
- D3.js D3.json返回Uncaught TypeError:无法读取属性'0'的未定义
- 如何计算(SVG) X/Y坐标的平移和旋转(在JS/D3.js)
- 当我们需要信任大约 200-300 个自定义图表时.js D3 是最佳选择吗?
- 简单条形图按字符串名称分组,带有 DC.js D3.js 和交叉过滤器.js
- 缺少标签- Cola.js/D3.js