javascript - D3: change line stroke color by hovering over legend -
i'm sure it's easy solution. can't find out. i've checked other similar q&a don't fit problem. want highlight line in multiline chart when pass mouse on corresponding legend. mistake not selecting propperly lines. thought had use "path", but... tried other, don't work. here attach pic of code: 1
thanks in advance!
sorry guys, fist time making question in stackoverflow. here attach code. mike bostock’s example: http://bl.ocks.org/mbostock/3884955
// margins ------------------------------------------------ var margin = {top: 20, right: 80, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var parsedate = d3.time.format("%y%m%d").parse; // scales ------------------------------------------------ var x = d3.scale.linear() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.category10(); // axis defining ------------------------------------------------ var xaxis = d3.svg.axis() .scale(x) .orient("bottom"); var yaxis = d3.svg.axis() .scale(y) .orient("left"); // scales ------------------------------------------------ var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.year); }) .y(function(d) { return y(d.outcome); }); 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 + ")"); d3.tsv("datac.tsv", function(error, data) { if (error) throw error; color.domain(d3.keys(data[0]).filter(function(key) { return key !== "year"; })); data.foreach(function(d) { d.year = parsedate(d.year); }); var countries = color.domain().map(function(name) { return { name: name, values: data.map(function(d) { return {year: d.year, outcome: +d[name]}; }) }; }); x.domain(d3.extent(data, function(d) { return d.year; })); y.domain([ d3.min(countries, function(c) { return d3.min(c.values, function(v) { return v.outcome; }); }), d3.max(countries, function(c) { return d3.max(c.values, function(v) { return v.outcome; }); }) ]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text(""); var country = svg.selectall(".country") .data(countries) .enter().append("g") .attr("class", "country"); country.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }); country.append("text") .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.outcome) + ")"; }) .attr("x", 3) .attr("dy", ".35em") .text(function(d) { return d.name; }) .on("mouseover", function() { d3.select("path") .style("stroke", "red"); }) .on("mouseout", function(d) { d3.select("path") .style("stroke", function(d) { return color(d.name); }); }); });
as hugues mentioned, need change select. if want 1 line, need select 1 specific line either giving id path (or g) or other ordinal selection.
example: https://jsfiddle.net/s1g2yyru/
for case, try:
var country = svg.selectall(".country") .data(countries) .enter().append("g") .attr("class", "country") .attr('id', function(d) { return d.name.replace(' ',''); }); country.append("text") .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.outcome) + ")"; }) .attr("x", 3) .attr("dy", ".35em") .text(function(d) { return d.name; }) .on("mouseenter", function() { svg.selectall('#' + d.name.replace(' ','') + ' path'). .style("stroke", "red"); }) .on("mouseleave", function(d) { svg.selectall('#' + d.name.replace(' ','') + ' path'). .style("stroke", color(d.name)); });
Comments
Post a Comment