鼠标悬停时，在多折线图上填充相同的线条颜色以在圆形上绘制，鼠标移出时从圆圈中删除相同的颜色 [英] Fill same line color in to circle on Multi Line chart when mouse over and remove color from circle when mouse out
本文介绍了鼠标悬停时，在多折线图上填充相同的线条颜色以在圆形上绘制，鼠标移出时从圆圈中删除相同的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在D3.js中，我在多折线图中有2条不同的线，具有不同的颜色和圆圈我想在鼠标悬停时将相同的颜色填充到圆圈中，而当鼠标悬停时将其删除.
Here I have 2 different line with different colors and circle in multiline chart in D3.js I want to fill same color into circle when mouse over and remove color when mouse out.
填充颜色属性有效，但未填充与相应行相同的颜色.
Fill color attribute is working but not filling same color as there respectively line.
.on("mouseenter", function (event, d) {
d3.selectAll("g.circle")
.attr('class', 'quadrantBorder') //style with a custom class and CSS
.style('stroke', 'red')
.style('fill', (d, i) => colors(i));
//alert('enter mouseenter')
// Show the tooltip and position it correctly
var x = xScaleTest(new Date(d.date));
var y = yScaleTest(d.stock);
console.log("This " +d3.select(this));
d3.select(this).style("fill",(d,i) => colors(i));
var data = [{
depotID: 123,
depotName: "All Depots",
materials: [{
materialName: "M7824 (MSB0011359C) 600 mg",
materialTypeID: 1234,
materialStock: [{
date: "2020-10-01",
stock: 100
},
{
date: "2020-11-01",
stock: 200
},
{
date: "2020-12-01",
stock: 300
},
{
date: "2021-01-01",
stock: 400
},
{
date: "2021-02-01",
stock: 500
},
{
date: "2021-03-01",
stock: 600
},
{
date: "2021-04-01",
stock: 700
},
{
date: "2021-05-01",
stock: 800
},
{
date: "2021-06-01",
stock: 900
},
{
date: "2021-07-01",
stock: 1000
},
{
date: "2021-08-01",
stock: 1100
},
{
date: "2021-09-01",
stock: 1200
},
]
},
{
materialName: "M7824 (MSB0011359C) 500 mg",
materialID: 1232,
materialStock: [{
date: "2020-10-01",
stock: 200
},
{
date: "2020-11-01",
stock: 300
},
{
date: "2020-12-01",
stock: 400
},
{
date: "2021-01-01",
stock: 500
},
{
date: "2021-02-01",
stock: 560
},
{
date: "2021-03-01",
stock: 870
},
{
date: "2021-04-01",
stock: 800
},
{
date: "2021-05-01",
stock: 900
},
{
date: "2021-06-01",
stock: 1000
},
{
date: "2021-07-01",
stock: 1100
},
{
date: "2021-08-01",
stock: 1200
},
{
date: "2021-09-01",
stock: 1300
},
]
}
]
}]
let width = 900,
height = 400,
margin = 100;
var dates = [];
for (let obj of data[0].materials[0].materialStock) {
dates.push(obj.date);
}
var domain = d3.extent(dates);
var newStartDate = new Date(domain[0]).setDate(new Date(domain[0]).getDate() - 15);
var newEndtDate = new Date(domain[1]).setDate(new Date(domain[1]).getDate() + 15);
var xScaleTest = d3.scaleTime()
.domain([new Date(newStartDate), new Date(newEndtDate)])
.range([0, width - margin * 2]);
var yScaleTest = d3.scaleLinear()
.domain([0, d3.max(data[0].materials, function(d) {
return d3.max(d.materialStock, function(d) {
return d.stock;
})
})])
.range([height - margin, 0]);
/* Add SVG */
var svg = d3.select("#xyAxes").append("svg")
.attr("width", (width + margin) + "px")
.attr("height", (height + margin) + "px")
.attr("style", "outline: thin solid black;")
.append('g')
.attr("transform", `translate(${margin}, ${margin})`);
//Add Line
var line = d3.line()
.x(function(d) {
return xScaleTest(new Date(d.date))
})
.y(function(d) {
return yScaleTest(d.stock)
});
let lines = svg.append('g')
.attr('class', 'lines');
var groups = lines.selectAll('.line-group')
.data(data[0].materials).enter()
.append('g');
var colors = d3.scaleOrdinal((d3.schemeCategory10));
//line
groups.append("path")
.attr("d", function(d) {
return line(d.materialStock)
})
.attr("fill", "none")
.attr("stroke", (d, i) => colors(i))
.style("stroke-dasharray", "5,5") //dashed array for line;
//dot on line
svg.selectAll("dot")
.data(data[0].materials)
.enter().append("g")
.attr("fill", "none")
.style("stroke", (d, i) => colors(i))
.attr("class", "dot")
.selectAll("dot")
.data(function(d) {
return d.materialStock;
})
.enter().append("circle")
.attr("class", "circle")
.attr("r", 4)
.attr("cx", function(d) {
return xScaleTest((new Date(d.date)));
})
.attr("cy", function(d) {
return yScaleTest(d.stock);
})
.on("mouseover", function(d) {
d3.select(this).style("fill", (d, i) => colors(i));
})
.on("mouseout", function() {
d3.select(this).style("fill", "none");
});
/* Add Axis into SVG */
var xAxis = d3.axisBottom(xScaleTest)
.ticks(d3.timeMonth.every(1))
.tickSizeOuter(0)
.tickSizeInner(-height + margin)
.tickFormat(d3.timeFormat("%b -%Y"));
var yAxis = d3.axisLeft(yScaleTest)
.ticks(12)
.tickSize(-width + margin + 100)
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height-margin})`)
.call(xAxis)
.call(g => g.selectAll(".tick:first-of-type line")
.attr("class", "axis_bar")
.attr("stroke", "#BEBEBE"))
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("class", "axis_y_tick")
.attr("stroke", "#E8E8E8"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.call(g => g.selectAll(".tick:first-of-type line")
.attr("class", "axis_bar")
.attr("stroke", "black"))
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("class", "axis_y_tick")
.attr("stroke", "#E8E8E8"));svg {
font-family: Sans-Serif, Arial;
}
.line {
stroke-width: 2;
fill: none;
}
.text {
font-size: 12px;
}
text.title {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #353535;
;
}<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="xyAxes"></div>推荐答案
i 可能具有不同的含义.这只是一个迭代器.绘制线条时，您 selectAll(.dot")，每行给您一组.当您运行 d3.select(this)时，仅选择一件事，这意味着 i 始终为零.
i can mean different things. It's just an iterator. When you draw the lines, you selectAll(".dot"), which gives you one group per line. When you run d3.select(this), you only select one thing, and that means that i is always zero.
要解决此问题，请在绘制点时将颜色作为属性添加到点上.或者，您可以使用 materialName 或 materialTypeID 作为标识符而不是数字.然后，将 materialName 作为属性添加到所有圆，然后可以从那里为它们着色:
To fix this, add the colour as a property to the dots when you draw them.
Or, you can use materialName or materialTypeID as an identifier instead of the number. Then, you add the materialName as a propery to all circles and you can colour them from there:
var data = [{
depotID: 123,
depotName: "All Depots",
materials: [{
materialName: "M7824 (MSB0011359C) 600 mg",
materialTypeID: 1234,
materialStock: [{
date: "2020-10-01",
stock: 100
},
{
date: "2020-11-01",
stock: 200
},
{
date: "2020-12-01",
stock: 300
},
{
date: "2021-01-01",
stock: 400
},
{
date: "2021-02-01",
stock: 500
},
{
date: "2021-03-01",
stock: 600
},
{
date: "2021-04-01",
stock: 700
},
{
date: "2021-05-01",
stock: 800
},
{
date: "2021-06-01",
stock: 900
},
{
date: "2021-07-01",
stock: 1000
},
{
date: "2021-08-01",
stock: 1100
},
{
date: "2021-09-01",
stock: 1200
},
]
},
{
materialName: "M7824 (MSB0011359C) 500 mg",
materialID: 1232,
materialStock: [{
date: "2020-10-01",
stock: 200
},
{
date: "2020-11-01",
stock: 300
},
{
date: "2020-12-01",
stock: 400
},
{
date: "2021-01-01",
stock: 500
},
{
date: "2021-02-01",
stock: 560
},
{
date: "2021-03-01",
stock: 870
},
{
date: "2021-04-01",
stock: 800
},
{
date: "2021-05-01",
stock: 900
},
{
date: "2021-06-01",
stock: 1000
},
{
date: "2021-07-01",
stock: 1100
},
{
date: "2021-08-01",
stock: 1200
},
{
date: "2021-09-01",
stock: 1300
},
]
}
]
}]
let width = 900,
height = 400,
margin = 100;
var dates = [];
for (let obj of data[0].materials[0].materialStock) {
dates.push(obj.date);
}
var domain = d3.extent(dates);
var newStartDate = new Date(domain[0]).setDate(new Date(domain[0]).getDate() - 15);
var newEndtDate = new Date(domain[1]).setDate(new Date(domain[1]).getDate() + 15);
var xScaleTest = d3.scaleTime()
.domain([new Date(newStartDate), new Date(newEndtDate)])
.range([0, width - margin * 2]);
var yScaleTest = d3.scaleLinear()
.domain([0, d3.max(data[0].materials, function(d) {
return d3.max(d.materialStock, function(d) {
return d.stock;
})
})])
.range([height - margin, 0]);
/* Add SVG */
var svg = d3.select("#xyAxes").append("svg")
.attr("width", (width + margin) + "px")
.attr("height", (height + margin) + "px")
.attr("style", "outline: thin solid black;")
.append('g')
.attr("transform", `translate(${margin}, ${margin})`);
//Add Line
var line = d3.line()
.x(function(d) {
return xScaleTest(new Date(d.date))
})
.y(function(d) {
return yScaleTest(d.stock)
});
let lines = svg.append('g')
.attr('class', 'lines');
var groups = lines.selectAll('.line-group')
.data(data[0].materials).enter()
.append('g');
var colors = d3.scaleOrdinal((d3.schemeCategory10))
.domain(data[0].materials.map(function(d) {
return d.materialName;
}));
//line
groups.append("path")
.attr("d", function(d) {
return line(d.materialStock)
})
.attr("fill", "none")
.attr("stroke", (d, i) => colors(i))
.style("stroke-dasharray", "5,5") //dashed array for line;
//dot on line
svg.selectAll("dot")
.data(data[0].materials)
.enter()
.append("g")
.attr("fill", "none")
.style("stroke", (d) => colors(d.materialName))
.attr("class", "dot")
.selectAll("dot")
.data(function(d) {
d.materialStock.forEach(function(v) {
v.materialName = d.materialName;
});
return d.materialStock;
})
.enter().append("circle")
.attr("class", "circle")
.attr("r", 4)
.attr("cx", function(d) {
return xScaleTest((new Date(d.date)));
})
.attr("cy", function(d) {
return yScaleTest(d.stock);
})
.on("mouseover", function(d) {
d3.select(this).style("fill", colors(d.materialName));
})
.on("mouseout", function() {
d3.select(this).style("fill", "none");
});
/* Add Axis into SVG */
var xAxis = d3.axisBottom(xScaleTest)
.ticks(d3.timeMonth.every(1))
.tickSizeOuter(0)
.tickSizeInner(-height + margin)
.tickFormat(d3.timeFormat("%b -%Y"));
var yAxis = d3.axisLeft(yScaleTest)
.ticks(12)
.tickSize(-width + margin + 100)
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height-margin})`)
.call(xAxis)
.call(g => g.selectAll(".tick:first-of-type line")
.attr("class", "axis_bar")
.attr("stroke", "#BEBEBE"))
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("class", "axis_y_tick")
.attr("stroke", "#E8E8E8"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.call(g => g.selectAll(".tick:first-of-type line")
.attr("class", "axis_bar")
.attr("stroke", "black"))
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("class", "axis_y_tick")
.attr("stroke", "#E8E8E8"));svg {
font-family: Sans-Serif, Arial;
}
.line {
stroke-width: 2;
fill: none;
}
.text {
font-size: 12px;
}
text.title {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #353535;
;
}<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="xyAxes"></div>这篇关于鼠标悬停时，在多折线图上填充相同的线条颜色以在圆形上绘制，鼠标移出时从圆圈中删除相同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
