将鼠标悬停在图例上并悬停在 nvD3 中的路径效果上
Hover on legend and hover on path effect in nvD3
我正在使用 nvd3 在我的项目中创建可视化。
我必须创建多种不同类型的图表,包括折线图。
这是我的 fiddle:
https://jsfiddle.net/ykga1jqw/
我的代码:
// Line chart begins here
var temperatureIndexJSON = [
{
key: "Average temp.",
values: [{ "x": 1998, "y": 0.45 }, { "x": 1999, "y": 0.48 }, { "x": 2000, "y": 0.5 }, { "x": 2001, "y": 0.52 }, { "x": 2002, "y": 0.55 }, { "x": 2003, "y": 0.58 }, { "x": 2004, "y": 0.6 }, { "x": 2005, "y": 0.61 }, { "x": 2006, "y": 0.61 }, { "x": 2007, "y": 0.61 }, { "x": 2008, "y": 0.62 }, { "x": 2009, "y": 0.62 }, { "x": 2010, "y": 0.62 }, { "x": 2011, "y": 0.63 }, { "x": 2012, "y": 0.67 }, { "x": 2013, "y": 0.71 }, { "x": 2014, "y": 0.77 }, { "x": 2015, "y": 0.83 }, { "x": 2016, "y": 0.89 }, { "x": 2017, "y": 0.95 }]
}
];
nv.addGraph(function () {
var chart = nv.models.lineChart() // Initialise the lineChart object.
.useInteractiveGuideline(true); // Turn on interactive guideline (tooltips)
chart.xAxis
.axisLabel('TimeStamp (Year)'); // Set the label of the xAxis (Vertical)
chart.yAxis
.axisLabel('Degrees (c)') // Set the label of the xAxis (Horizontal)
.tickFormat(d3.format('.02f')); // Rounded Numbers Format.
d3.select('#averageDegreesLineChart svg') // Select the ID of the html element we defined earlier.
.datum(temperatureIndexJSON) // Pass in the JSON
.attr('class','line-testing')
.transition().duration(500) // Set transition speed
.call(chart); // Call & Render the chart
nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
return;
});
我想在用户将鼠标悬停在图例或路径本身上时更改描边宽度。
与这两个链接类似的效果:
https://jsfiddle.net/ymavtsbj/11/
http://bl.ocks.org/bobmonteverde/2070123
我尝试检查 nvd3,但由于它的文档定义不明确并且没有此类示例可用,所以到目前为止我还没有找到解决方案。有人可以帮忙吗?
您可以使用 legendMouseover
、elementMouseover
事件,如下所示:
chart.legend.dispatch.on('legendMouseover', function(e) {
d3.select('path.nv-line').attr('stroke-width', 4);
});
chart.lines.dispatch.on('elementMouseover', function(e) {
d3.select('path.nv-line').attr('stroke-width', 4);
});
工作example
我正在使用 nvd3 在我的项目中创建可视化。 我必须创建多种不同类型的图表,包括折线图。 这是我的 fiddle: https://jsfiddle.net/ykga1jqw/
我的代码:
// Line chart begins here
var temperatureIndexJSON = [
{
key: "Average temp.",
values: [{ "x": 1998, "y": 0.45 }, { "x": 1999, "y": 0.48 }, { "x": 2000, "y": 0.5 }, { "x": 2001, "y": 0.52 }, { "x": 2002, "y": 0.55 }, { "x": 2003, "y": 0.58 }, { "x": 2004, "y": 0.6 }, { "x": 2005, "y": 0.61 }, { "x": 2006, "y": 0.61 }, { "x": 2007, "y": 0.61 }, { "x": 2008, "y": 0.62 }, { "x": 2009, "y": 0.62 }, { "x": 2010, "y": 0.62 }, { "x": 2011, "y": 0.63 }, { "x": 2012, "y": 0.67 }, { "x": 2013, "y": 0.71 }, { "x": 2014, "y": 0.77 }, { "x": 2015, "y": 0.83 }, { "x": 2016, "y": 0.89 }, { "x": 2017, "y": 0.95 }]
}
];
nv.addGraph(function () {
var chart = nv.models.lineChart() // Initialise the lineChart object.
.useInteractiveGuideline(true); // Turn on interactive guideline (tooltips)
chart.xAxis
.axisLabel('TimeStamp (Year)'); // Set the label of the xAxis (Vertical)
chart.yAxis
.axisLabel('Degrees (c)') // Set the label of the xAxis (Horizontal)
.tickFormat(d3.format('.02f')); // Rounded Numbers Format.
d3.select('#averageDegreesLineChart svg') // Select the ID of the html element we defined earlier.
.datum(temperatureIndexJSON) // Pass in the JSON
.attr('class','line-testing')
.transition().duration(500) // Set transition speed
.call(chart); // Call & Render the chart
nv.utils.windowResize(chart.update); // Intitiate listener for window resize so the chart responds and changes width.
return;
});
我想在用户将鼠标悬停在图例或路径本身上时更改描边宽度。 与这两个链接类似的效果:
https://jsfiddle.net/ymavtsbj/11/
http://bl.ocks.org/bobmonteverde/2070123
我尝试检查 nvd3,但由于它的文档定义不明确并且没有此类示例可用,所以到目前为止我还没有找到解决方案。有人可以帮忙吗?
您可以使用 legendMouseover
、elementMouseover
事件,如下所示:
chart.legend.dispatch.on('legendMouseover', function(e) {
d3.select('path.nv-line').attr('stroke-width', 4);
});
chart.lines.dispatch.on('elementMouseover', function(e) {
d3.select('path.nv-line').attr('stroke-width', 4);
});
工作example