我想在我現有的折線圖中添加工具提示。我以多種方式嘗試過，但無法正常作業
我想以這樣的工具提示結束：https ://d3-graph-gallery.com/graph/interactivity_tooltip.html
我嘗試了多種方式，現在有以下內容：
g.append("g")
.selectAll("dotDemand")
.data(dataLine.filter(d => d.valueLine))
.enter()
.append("circle")
.attr("cx", function(d) { return plotDate(d.date) } )
.attr("cy", function(d) { return y(d.valueLine) } )
.attr("r", 4)
.attr("fill", "#439DD2")
.attr("stroke-width", 0)
.on('mouseover', function (d, i) {
d3.select(this).transition()
.duration('100')
.attr("r", 10)
.attr("stroke", "#000")
.attr("stroke-width", 5);
div.transition()
.duration('50')
.style("opacity", 0);
div.html("$" d3.format(".2f")(d.date))
.style("left", plotDate(d.valueLine) 10 "px")
.style("top", y(d.date) "px");
})
.on('mouseout', function (d, i) {
d3.select(this).transition()
.duration('200')
.attr("r", 4)
.attr("fill", "#439DD2")
.attr("stroke-width", 0);
//makes div disappear
div.transition()
.duration('200')
.style("opacity", 0);
});
但我做錯了什么。
我的資料如下所示：
Date,value
5/31/2022,12
6/1/2022,23
6/2/2022,24
6/3/2022,26
6/4/2022,32
6/5/2022,32
6/6/2022,35
6/6/2022,32
6/7/2022,31
6/8/2022,30
6/8/2022,21
6/10/2022,23
6/11/2022,13
6/12/2022,13
6/13/2022,14
6/14/2022,
6/15/2022,
6/16/2022,
6/17/2022,
6/18/2022,
6/19/2022,
6/20/2022,
6/21/2022,
6/22/2022,
6/23/2022,
6/24/2022,
6/25/2022,
6/26/2022,
6/27/2022,
我的完整 d3 線圖組件如下所示：
import * as d3 from 'd3';
import { useEffect, useState } from 'react';
import csvFile2 from '../../data/testData.csv';
const BasicLinechart = (props) => {
const [dataLine, setDataLine] = useState([]);
console.log(csvFile2)
const { width, height } = props;
useEffect(() => {
if (dataLine.length > 0) {
drawLineChart();
} else {
getCSVDataLine();
}
}, [dataLine]);
// Read in csv
const getCSVDataLine = async () => {
const tempData = [];
await d3.csv(
csvFile2,
function (d) {
tempData.push({
date: d3.timeParse("%m/%d/%Y")(d.date),
valueLine: Number(d.value),
});
}
);
setDataLine(tempData);
};
const drawLineChart = () => {
const parseDate = d3.timeParse("%m/%d/%Y"),
formatDay = d3.timeFormat("%d"),
formatMonth = d3.timeFormat("%b");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// set margins to have enough space for the axis
var margin = { top: 20, left: 50 };
// Add X axis in date format: it's a double x-axis with month year
var xDate = d3.scaleTime()
.domain(d3.extent(dataLine, function(d) { return d.date; }))
.range([ 0, width ])
var xAxisMonth = d3.axisBottom()
.scale(xDate)
.ticks(d3.timeDay.every(1))
.tickFormat(formatMonth);
// Define 'div' for tooltips
var div = d3.select("svg")
.append("div") // declare the tooltip div
.attr("class", "tooltip") // apply the 'tooltip' class
.style("opacity", 0);
// create the chart area
const svg = d3.select('.svg-basic')
svg.selectAll("*").remove();
// set base for axes
var g = svg.append('g')
.attr('transform', 'translate(' margin.left ',' margin.top ')')
.attr("class", "legendOrdinal");
g.append("g")
.attr("transform", "translate(0," (height 40) ")")
.call(xAxisMonth)
.selectAll("text")
.style("font-size", "12px")
.attr("stroke", "#595959");
// styling of the axes (possible later in styling sheet)
g.selectAll("path")
.style("stroke", "#595959")
g.append("g")
.select(".domain")
.attr("stroke", "#595959")
.attr("stroke-width", "6")
.attr("opacity", ".6");
// Add Y axis
var y = d3.scaleLinear()
.domain([0, d3.max(dataLine, function (d) { return Math.max(d.valueLine); })])
.range([height, 10]);
// scale x axis for month and day
var plotDate = d3.scaleTime()
.domain(d3.extent(dataLine, function (d) { return d.date; }))
.range([0, width])
// Styling y
g.append("g")
.call(d3.axisLeft(y))
.attr("stroke", "#595959")
.selectAll("text")
.style("font-size", "12px")
.attr("stroke", "#595959");
// set lines coordinates
const valueLinePlot = d3.line()
.x(function (d) { return plotDate(d.date) })
.y(function (d) { return y(d.valueLine) })
.curve(d3.curveNatural)
// Add the line for prediction
g.append("path")
.datum(dataLine)
.attr("fill", "none")
.attr("stroke", "#439DD2")
.attr("stroke-width", 2.5)
.attr("d", valueLinePlot)
g.append("g")
.selectAll("dotDemand")
.data(dataLine.filter(d => d.valueLine))
.enter()
.append("circle")
.attr("cx", function(d) { return plotDate(d.date) } )
.attr("cy", function(d) { return y(d.valueLine) } )
.attr("r", 4)
.attr("fill", "#439DD2")
.attr("stroke-width", 0)
.on('mouseover', function (d, i) {
d3.select(this).transition()
.duration('100')
.attr("r", 10)
.attr("stroke", "#000")
.attr("stroke-width", 5);
div.transition()
.duration('50')
.style("opacity", 0);
div.html("$" d3.format(".2f")(d.date))
.style("left", plotDate(d.valueLine) 10 "px")
.style("top", y(d.date) "px");
})
.on('mouseout', function (d, i) {
d3.select(this).transition()
.duration('200')
.attr("r", 4)
.attr("fill", "#439DD2")
.attr("stroke-width", 0);
//makes div disappear
div.transition()
.duration('200')
.style("opacity", 0);
});
// text label for the y axis
g.append("text")
.attr("x", '-11%' )
.attr("y", '-6%' )
.style("text-anchor", "right")
.style("transform", "rotate(-90deg)")
.text("Total Units (#)")
.attr("stroke", "#919191")
.selectAll("text")
.style("font-size", "10px")
// text label for the x axis
g.append("text")
.attr("x", '73%' )
.attr("y",'70%' )
.style("text-anchor", "right")
.text("Date")
.attr("stroke", "#919191")
.selectAll("text")
.style("font-size", "10px")
}
return (
<div >
<svg className="svg-basic" width="800px" height="600px" />
</div>
)
}
export default BasicLinechart;我認為這可能是對svg-basic/ svg/g或其他東西的參考，但我無法弄清楚。
uj5u.com熱心網友回復：
你必須先創建一個絕對容器
我看到你的代碼你已經定義了兩次工具提示，首先洗掉這兩個和這個
let tooltip = d3
.select("#tooltipContainer")
.style("position", "absolute")
.style("top", 0)
.style("left", 0)
.style("display", "none");
這是你想在將點懸停在折線圖上時顯示工具提示 div 然后嘗試這樣
g.append("g")
.selectAll("dotDemand")
.data(dataLine.filter(d => d.valueLine))
.enter()
.append("circle")
.attr("cx", function(d) { return plotDate(d.date) } )
.attr("cy", function(d) { return y(d.valueLine) } )
.attr("r", 4)
.attr("fill", "#439DD2")
.attr("stroke-width", 0)
.on('mouseover', function (d, i) {
d3.select(this).transition()
.duration('100').attr("r", 10).attr("stroke", "#000").attr("stroke-width", 5);
tooltip.transition().duration(0).style("display", "block");
tooltip.html("$" d3.format(".2f")(d.date))
.style("left", d.pageX 10 "px")
.style("top", d.pageY 10 "px");
})
.on("mouseout", (e) => {
d3.select(this).transition().attr("r", 4);
tooltip.transition().duration(0);
tooltip
.style("left", "0px")
.style("top", "0px")
.style("display", "none");
})
這是你必須添加的代碼，但請記住你使用的是 你必須預定義 jsx 元素的正確反應
注意-永遠不要append在反應中使用方法而不是追加你必須使用select , join方法如果你使用追加方法你每次 useEffect 和 useState 更改時都會得到圖形的副本
我會提供我最近的線圖實時代碼給你如果你需要你可以根據你的需要修改
這是我的 codepan javascript 代碼https://codepen.io/codingdarci/pen/ZERpNOG
或者你想要在相同的代碼中做出反應你可以提到我味精我會把它粘貼在這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/535877.html