Как связать данные с прямоугольником прослушивания в линейной диаграмме D3 ⇐ Javascript

[Anonymous]

Я работаю над созданием подъема инструментов в линейной диаграмме D3. Учебное пособие, по которому я следовал () дал мне какой-то код, но учебник обрабатывал данные иначе, чем я. В моем коде данные связаны с линией диаграммы, а не к всей коде D3. < /P>
Я думаю, что данные также связаны с прямоугольником, но я не уверен. Я вставляю код учебника для метода MouseOver HelloadRect, но когда я запускаю страницу, переменная xPO одинакова, где бы я ни ставил свою мышь. < /P>
Что я делаю неправильно, пожалуйста? Я обработал привязку данных неправильно?
< /code>
css: < /p>
.x.label, .y.label {
font-weight: bold;
font-size: 1rem;
}
.x.label {
margin-left: -50%;
}

rect {
pointer-events: all;
fill-opacity: 0;
stroke-opacity: 0;
z-index: 1;
background-color: transparent;
}

.tooltip {
position: absolute;
padding: 10px;
background-color: steelblue;
color: white;
border: 1px solid white;
border-radius: 10px;
display: none;
opacity: .5;
}
< /code>
js: < /p>
var data = [ {'year':'2007', 'percent':'.05'}, {'year':'2008', 'percent':'.10'}, {'year':'2009', 'percent':'.15'}, {'year':'2010', 'percent':'.25'} ];
sendData(data);
function sendData(data) {
const width = 1140;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 50;
const marginLeft = 70;

//var data = [ {'year':'2007', 'percent':'.05'}, {'year':'2008', 'percent':'.10'}, {'year':'2009', 'percent':'.15'} ]

const x = d3.scaleUtc()
.domain([new Date("2007-01-01"), new Date("2023-01-01")])
.range([marginLeft, width - marginRight]); //same as .range([70,1120])

const y = d3.scaleLinear()
.domain([0, .5])
.range([height - marginBottom, marginTop]); //same as .range([350, 20])

const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);

svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x)
.ticks(d3.utcYear.every(1))
);

svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width/2)
.attr("y", height - 6)
.text("Year");

svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", -height/3)
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Percent");

svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y));

var heightOfY = height-marginBottom;
var Xmin = 2007;
var Xmax = 2023;
var numTicks = Xmax - Xmin + 1; //have to count the 0 point, so add 1
var XmaxRange = width - marginRight;
var eachTickWidth = XmaxRange / numTicks;

let path=svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) {
//return x(d.year)
var mine = ((d.year - Xmin)*eachTickWidth) + marginLeft;
//return x(d.year);
return(mine); console.log(d.year);
})
.y(function(d) {
return y(d.percent)
})
);

const tooltip = d3.select("svg")
.append("div")
.attr("class", "tooltip");

const circle = svg.append("circle")
.attr("r", 0)
.attr("fill","steelblue")
.style("stroke","white")
.attr("opacity", .70)
.style("pointer-events","none");

const listeningRect = svg.append("rect")
.datum(data)
.attr("width", width)
.attr("height", height);

listeningRect.on("mousemove", function(event){
const [xCoord] = d3.pointer(event, this);
const bisectData = d3.bisector(d => data.year).left;
const x0 = x.invert(xCoord);
const i = bisectData(data, x0, 1);
const d0 = data[i-1];
const d1 = data;
const d = x0 - d0.year> d1.year- x0 ? d1 : d0;
const xPos = x(d.year);
const yPos = y(d.percent);

circle.attr("cx", xPos)
.attr("cy", yPos);

console.log(xPos); //always gives the same variable
});

container.append(svg.node());

} //end function sendData


Подробнее здесь: https://stackoverflow.com/questions/797 ... line-chart