在d3.js可視化中區分鼠標懸停與mouseout事件

Question

我正在使用此d3.js示例作爲可視化項目。我無法改變線條的樣式。我希望線條在鼠標熄滅時變爲灰色，在鼠標結束時線條變爲紅色。 現在的問題是，當鼠標不在所有線條中時，線條呈紅色，而我需要它們爲灰色，並且當鼠標在一條線上時，它會變成紅色，其餘的變成灰色。 請幫助我。這是original example。

這裏是css。

svg { 
    font: 10px sans-serif; 
} 

.background path { 
    fill: none; 
    stroke: none; 
    color:#ccc; 
    stroke-width: 20px; 
    pointer-events: stroke; 
} 

.foreground path { 
    fill: none; 
    stroke: red; 
    stroke-width: 1.5px; 
} 

.axis .title { 
    font-size: 11px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

.axis line, 
.axis path { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.label { 
    -webkit-transition: fill 125ms linear; 
} 

.active .label:not(.inactive) { 
    font-weight: bold; 
} 

.label.inactive { 
    fill: #ccc; 
} 

.foreground path.inactive { 
    stroke: #ccc; 
    stroke-opacity: .5; 
    stroke-width: 1px; 
} 

這是d3示例的Javascript。

var margin = {top: 30, right: 40, bottom: 20, left: 200}, 
    width = 1000 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var dimensions = [ 
    { 
    name: "مبدأ", 
    scale: d3.scale.ordinal().rangePoints([0, height]), 
    type: String 
    }, 
    { 
    name: "شغل", 
    scale: d3.scale.ordinal().rangePoints([0, height]), 
    type: String 
    }, 
    { 
    name: "کار (ساعت)", 
    scale: d3.scale.ordinal().rangePoints([0, height]), 
    type: String 
    }, 
    { 
    name: "مُد", 
    scale: d3.scale.ordinal().rangePoints([0, height]), 
    type: String 
    }, 
    { 
    name: "جابه‌جایی (ساعت)", 
    scale: d3.scale.ordinal().rangePoints([0, height]), 
    type: String 
    }, 
    { 
    name: "استراحت (ساعت)", 
    scale: d3.scale.ordinal().rangePoints([0, height]), 
    type: String 
    }, 
    { 
    name: "مقصد", 
    scale: d3.scale.ordinal().rangePoints([0, height]), 
    type: String 
    } 
]; 

var x = d3.scale.ordinal() 
    .domain(dimensions.map(function(d) { return d.name; })) 
    .rangePoints([0, width]); 

var line = d3.svg.line() 
    .defined(function(d) { return !isNaN(d[1]); }); 

var yAxis = d3.svg.axis() 
    .orient("left"); 

var svg = d3.select("body").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 dimension = svg.selectAll(".dimension") 
    .data(dimensions) 
    .enter().append("g") 
    .attr("class", "dimension") 
    .attr("transform", function(d) { return "translate(" + x(d.name) + ")"; }); 

d3.tsv("DataEntryabridged.tsv", function(error, data) { 
    if (error) throw error; 

    dimensions.forEach(function(dimension) { 
    dimension.scale.domain(dimension.type === Number 
     ? d3.extent(data, function(d) { return +d[dimension.name]; }) 
     : data.map(function(d) { return d[dimension.name]; }).sort()); 
    }); 

    svg.append("g") 
     .attr("class", "background") 
    .selectAll("path") 
     .data(data) 
    .enter().append("path") 
     .attr("d", draw); 

    svg.append("g") 
     .attr("class", "foreground") 
    .selectAll("path") 
     .data(data) 
    .enter().append("path") 
     .attr("d", draw); 

    dimension.append("g") 
     .attr("class", "axis") 
     .each(function(d) { d3.select(this).call(yAxis.scale(d.scale)); }) 
    .append("text") 
     .attr("class", "title") 
     .attr("text-anchor", "middle") 
     .attr("y", -9) 
     .text(function(d) { return d.name; }); 

    // Rebind the axis data to simplify mouseover. 
    svg.select(".axis").selectAll("text:not(.title)") 
     .attr("class", "label") 
     .data(data, function(d) { return d.name || d; }); 

    var projection = svg.selectAll(".axis text,.background path,.foreground path") 
     .on("mouseover", mouseover) 
     .on("mouseout", mouseout); 

    function mouseover(d) { 
    svg.classed("active", true); 
    projection.classed("inactive", function(p) { return p !== d; }); 
    projection.filter(function(p) { return p === d; }).each(moveToFront); 
    } 

    function mouseout(d) { 
    svg.classed("active", false); 
    projection.classed("inactive", false); 
    } 

    function moveToFront() { 
    this.parentNode.appendChild(this); 
    } 
}); 

function draw(d) { 
    return line(dimensions.map(function(dimension) { 
    return [x(dimension.name), dimension.scale(d[dimension.name])]; 
    })); 
} 

Answer 1

此處的投影包含來自多個類的元素。因此，請單獨選擇所有行，並在鼠標懸停時更改其樣式並在鼠標懸停部分中撤消。

修改後的功能如下，根據需要更改樣式。還要將.foreground路徑填充更改爲#ccc（默認顏色）。

希望這會有所幫助！

function mouseover(d) { 
    svg.classed("active", true); 
    projection.classed("inactive", function(p) { return p !== d; }); 
    projection.filter(function(p) { return p === d; }).each(moveToFront); 
    // new line added 
    svg.selectAll(".foreground path").filter(function(p) { 
     return p === d;}).each(function(i) { d3.select(this).style("stroke", "red")}); } 

function mouseout(d) { 
    svg.classed("active", false); 
    projection.classed("inactive", false); 
    // new line here 
    svg.selectAll(".foreground path").each(function(i) { 
    d3.select(this).style("stroke", "#ccc")}); 
}