下面是我在传单地图中加载D3多图表的代码popup一切正常但我无法加载工具提示鼠标事件没有提升。甚至在鼠标移动元素上的console.log也不起作用我也可以在右键单击检查元素。我也没有在事件列表器中看到与此元素相关的任何内容。
var chartdiv = document.createElement("div");
chartdiv.className = "pricechart";
// set the dimensions and margins of the graph
var margin = {top: 25, right: 70, bottom: 80, left: 50},
width = 480 - margin.left - margin.right,
height = 240 - margin.top - margin.bottom;
// parse the date / time
//var parseTime = d3.timeParse("%Y-%m-%d");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var yrain = d3.scaleLinear().range([height, 0]);
// define the line
var smi_line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.smi); })
var rain_line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.rain); });
// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y).ticks(5)
}
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select(chartdiv).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 + ")");
// Scale the range of the data
x.domain(d3.extent(stats, function(d) { return d.date; }));
y.domain([d3.min(stats, function(d) { return Math.min(d.smi, d.rain, 0); }) , d3.max(stats, function(d) { return Math.max(d.smi, d.rain, 100); })]);
svg.append("linearGradient")
.attr("id", "temperature-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0).attr("y1", y(0))
.attr("x2", 0).attr("y2", y(100))
.selectAll("stop")
.data([
{offset: "0%", color: "rgb(252, 0, 23)"},
{offset: "25%", color: "rgb(252, 0, 23)"},
{offset: "26%", color: "rgb(255, 254, 52)"},
{offset: "50%", color: "rgb(255, 254, 52)"},
{offset: "51%", color: "rgb(44, 255, 254)"},
{offset: "75%", color: "rgb(44, 255, 254)"},
{offset: "76%", color: "rgb(4, 20, 251)"},
{offset: "100%", color: "rgb(4, 20, 251)"}
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
// add the X gridlines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
)
// add the Y gridlines
svg.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
)
// Add the SMI path.
svg.append("path")
.data([stats])
.attr("class", "smi-line")
//.style("stroke", "#ff0000")
.attr("d", smi_line);
// Add the Rain path.
svg.append("path")
.data([stats])
.attr("class", "rain-line")
//.style("stroke", "#ff0000")
.attr("d", rain_line);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.tickFormat(d3.timeFormat("%d-%b-%y")))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)");
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height + margin.bottom -30) + ")")
.style("text-anchor", "middle")
.attr("dy", "1em")
.text("Date");
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y).ticks(5));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Soil Moisture Index");
// Add the Right Y Axis
svg.append("g")
.attr("transform", "translate(" + width + " ,0)")
.call(d3.axisRight(y).ticks(5)
.tickFormat(d => (d + " mm")));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", width + margin.right -15)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Rainfall");
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var focus = g.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("line")
.attr("class", "x-hover-line hover-line")
.attr("y1", 0)
.attr("y2", height);
focus.append("line")
.attr("class", "y-hover-line hover-line")
.attr("x1", width)
.attr("x2", width);
focus.append("circle")
.attr("r", 7.5);
focus.append("text")
.attr("x", 15)
.attr("dy", ".31em");
svg.append("rect")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
var bisectDate = d3.bisector(function(d) { return d.year; }).left;
function mousemove() {
console.log('mousemove');
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.year > d1.year - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.year) + "," + y(d.value) + ")");
focus.select("text").text(function() { return d.value; });
focus.select(".x-hover-line").attr("y2", height - y(d.value));
focus.select(".y-hover-line").attr("x2", width + width);
}