我正在使用 d3.js 制作径向直方图。
问题如下:我有一个初始过渡，使条形“增长”到它们的实际高度(eyecandy)。
一切正常。现在我想添加一个悬停过渡，即所有项目的不透明度应在悬停时过渡到 .5，并在悬停状态结束时返回到 1。
它自己也能正常工作。
如果在初始转换仍在发生时触发悬停状态，它将停止正常工作。然后初始过渡就停止了，条形图没有达到它们的最终高度。
问题:我怎样才能使两个过渡一起工作，以便悬停过渡不会停止初始过渡？
Here is a jsfiddle .这是它自己的代码:
<script src="http://d3js.org/d3.v3.js"></script>
<div id="chart"></div>
<script>
var margin = {
top: 0,
right: 0,
bottom: 0,
left: 0
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var arcMin = 150;
var arcMax = 250;
var pi = Math.PI;
var color = d3.scale.category10();
var data = [
{
"value": 20,
"category": "category1"
},
{
"value": 24,
"category": "category1"
},
{
"value": 9,
"category": "category1"
},
{
"value": 93,
"category": "category1"
},
{
"value": 82,
"category": "category1"
},
{
"value": 56,
"category": "category1"
},
{
"value": 29,
"category": "category1"
},
{
"value": 6,
"category": "category1"
},
{
"value": 10,
"category": "category1"
},
{
"value": 4,
"category": "category1"
},
{
"value": 45,
"category": "category1"
},
{
"value": 25,
"category": "category1"
},
{
"value": 26,
"category": "category2"
},
{
"value": 53,
"category": "category2"
},
{
"value": 60,
"category": "category2"
},
{
"value": 87,
"category": "category2"
},
{
"value": 77,
"category": "category2"
},
{
"value": 40,
"category": "category2"
},
{
"value": 12,
"category": "category2"
},
{
"value": 80,
"category": "category2"
},
{
"value": 23,
"category": "category2"
},
{
"value": 53,
"category": "category2"
},
{
"value": 26,
"category": "category2"
},
{
"value": 34,
"category": "category2"
},
{
"value": 79,
"category": "category2"
},
{
"value": 98,
"category": "category3"
},
{
"value": 1,
"category": "category3"
},
{
"value": 13,
"category": "category3"
},
{
"value": 80,
"category": "category3"
},
{
"value": 66,
"category": "category3"
},
{
"value": 5,
"category": "category3"
},
{
"value": 36,
"category": "category3"
},
{
"value": 74,
"category": "category3"
},
{
"value": 32,
"category": "category3"
},
{
"value": 4,
"category": "category3"
},
{
"value": 54,
"category": "category3"
},
{
"value": 8,
"category": "category3"
},
{
"value": 64,
"category": "category3"
},
{
"value": 5,
"category": "category3"
},
{
"value": 58,
"category": "category3"
},
{
"value": 41,
"category": "category3"
},
{
"value": 81,
"category": "category3"
},
{
"value": 73,
"category": "category3"
},
{
"value": 20,
"category": "category3"
},
{
"value": 32,
"category": "category3"
},
{
"value": 42,
"category": "category3"
},
{
"value": 55,
"category": "category3"
},
{
"value": 74,
"category": "category3"
},
{
"value": 17,
"category": "category3"
},
{
"value": 6,
"category": "category3"
},
{
"value": 96,
"category": "category3"
},
{
"value": 18,
"category": "category3"
},
{
"value": 1,
"category": "category3"
},
{
"value": 18,
"category": "category3"
},
{
"value": 40,
"category": "category3"
},
{
"value": 9,
"category": "category3"
},
{
"value": 30,
"category": "category3"
},
{
"value": 28,
"category": "category3"
},
{
"value": 25,
"category": "category3"
},
{
"value": 44,
"category": "category3"
},
{
"value": 20,
"category": "category3"
},
{
"value": 99,
"category": "category3"
},
{
"value": 95,
"category": "category3"
},
{
"value": 50,
"category": "category3"
},
{
"value": 65,
"category": "category3"
},
{
"value": 66,
"category": "category3"
},
{
"value": 7,
"category": "category3"
},
{
"value": 70,
"category": "category4"
},
{
"value": 39,
"category": "category4"
},
{
"value": 12,
"category": "category4"
},
{
"value": 94,
"category": "category4"
},
{
"value": 55,
"category": "category4"
},
{
"value": 15,
"category": "category4"
},
{
"value": 84,
"category": "category4"
},
{
"value": 31,
"category": "category4"
},
{
"value": 48,
"category": "category4"
},
{
"value": 26,
"category": "category4"
},
{
"value": 70,
"category": "category4"
},
{
"value": 30,
"category": "category4"
},
{
"value": 26,
"category": "category4"
},
{
"value": 75,
"category": "category4"
},
{
"value": 43,
"category": "category4"
},
{
"value": 83,
"category": "category4"
},
{
"value": 64,
"category": "category5"
},
{
"value": 52,
"category": "category5"
},
{
"value": 37,
"category": "category5"
},
{
"value": 11,
"category": "category5"
},
{
"value": 77,
"category": "category6"
},
{
"value": 94,
"category": "category6"
},
{
"value": 37,
"category": "category6"
},
{
"value": 64,
"category": "category6"
},
{
"value": 92,
"category": "category6"
},
{
"value": 58,
"category": "category6"
},
{
"value": 70,
"category": "category6"
},
{
"value": 47,
"category": "category6"
},
{
"value": 87,
"category": "category6"
},
{
"value": 6,
"category": "category6"
},
{
"value": 87,
"category": "category6"
},
{
"value": 32,
"category": "category6"
},
{
"value": 70,
"category": "category6"
},
{
"value": 38,
"category": "category6"
},
{
"value": 38,
"category": "category6"
},
{
"value": 31,
"category": "category6"
},
{
"value": 82,
"category": "category6"
},
{
"value": 44,
"category": "category6"
},
{
"value": 21,
"category": "category6"
},
{
"value": 78,
"category": "category6"
},
{
"value": 97,
"category": "category6"
},
{
"value": 67,
"category": "category6"
},
{
"value": 29,
"category": "category6"
},
{
"value": 6,
"category": "category6"
}
];
var vis = d3.select("#chart").append("svg").attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var min = 1;
var max = data.length;
var middle = Math.round((max + min) / 2) - 0.5;
var innerArc = d3.svg.arc()
.innerRadius(arcMin)
.outerRadius(arcMin + 10)
.startAngle(function (d, i) {
return (i + 0.1 - middle) * (pi / middle);
})
.endAngle(function (d, i) {
return (i + 1 - 0.1 - middle) * (pi / middle);
});
var outerArc = d3.svg.arc()
.innerRadius(arcMin)
.outerRadius(function (d, i) {
// Use min-max-normalization to scale value into interval [arcMin, arcMax]
return (d.value - min) * ((arcMax - arcMin) / (max - min)) + arcMin;
})
.startAngle(function (d, i) {
return (i + 0.1 - middle) * (pi / middle);
})
.endAngle(function (d, i) {
return (i - 0.1 + 1 - middle) * (pi / middle);
});
var lines = vis.selectAll(".line")
.data(data)
.enter()
.append("path")
.attr("class", function (d) {
return d.category + " line";
})
.attr("d", innerArc)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.attr("fill", function (d) {
return color(d.category);
})
.on("mouseleave", function () {
d3.selectAll(".line")
.transition()
.duration(300)
.style("opacity", 1);
})
.on("mouseenter", function (d, i) {
d3.selectAll(".line")
.transition()
.duration(150)
.style("opacity", .5);
})
.transition()
.duration(2000)
.delay(function (d) {
return ((d.value - min) / (max - min)) * 500;
})
.attr("d", outerArc);
</script>
最佳答案
在其他转换开始之后添加的转换总是取消那些较早的转换，cf。 the documentation :
Only one transition may be active on a given element at a given time. However, multiple transitions may be scheduled on the same element; provided they are staggered in time, each transition will run in sequence. If a newer transition runs on a given element, it implicitly cancels any older transitions, including any that were scheduled but not yet run.
特别是:
This allows new transitions, such as those in response to a new user event, to supersede older transitions even if those older transitions are staged or have staggered delays.
因此，您正在寻找的用例明确不受 D3 支持。
要实现您想要的效果，将涉及在第二个转换开始时捕获状态并手动合并转换(有关指针，请参阅 here)，或在不同元素上进行转换。
关于javascript - 悬停过渡停止初始过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25564780/