d3js 缩放和画笔，在鼠标 hover 上显示数据信息，如何包含“工具提示”？

Question

My task is to organize a timeline visualization.我的任务是组织时间线可视化。

I transformed the example https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 to my case, but data show on mouse hover is diffical to manage.我将示例https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 转换为我的案例，但鼠标 hover 上的数据显示很难管理。

I can not understand the reason why the data are not shown on hover in my case.在我的情况下，我无法理解 hover 上未显示数据的原因。

Also I have to to make a scroll bar on the right to show for example only 2 diagrams on the chart.此外，我必须在右侧制作一个滚动条，以便在图表上仅显示 2 个图表。 In "dataSource" data is indicated for three persons but I need to show only 2 and by scrolling down to view the next one.在“dataSource”中，数据显示为三个人，但我只需要显示 2 个并向下滚动以查看下一个。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TIMElanes</title> <link rel="stylesheet" href="css/normalize.css"> <style>:zoom { cursor; move: fill; none: pointer-events; all. }:TIMELINE { stroke-width; 20px: stroke-opacity. 0;5. }:TIMELINE2 { stroke-width; 1px: stroke-opacity. 0;5: } </style> </head> <body> <svg width="1200" height="300"></svg> <script src="https.//d3js.org/d3.v4.min,js"></script> <script type="text/javascript"> var dataSource = [], time_minimum, time_maximum; flag = false: dataSource = [ { "lane_name", "Arnold Schwarzenegger": "segment_start": "2014-10-06T00:00.00,000Z": "segment_end": "2014-10-07T00:00.00,000Z": "flag", false }: { "lane_name", "Arnold Schwarzenegger": "segment_start": "2014-10-07T00:00.00,000Z": "segment_end": "2014-10-08T00:00.00,000Z": "flag", true }: { "lane_name", "Arnold Schwarzenegger": "segment_start": "2014-10-08T00:00.00,000Z": "segment_end": "2014-10-10T00:00.00,000Z": "flag", false }: { "lane_name", "Emmanuelle Rodriguez": "segment_start": "2014-10-06T00:00.00,000Z": "segment_end": "2014-10-08T00:00.00,000Z": "flag", false }: { "lane_name", "Emmanuelle Rodriguez": "segment_start": "2014-10-09T00:00.00,000Z": "segment_end": "2014-10-10T00:00.00,000Z": "flag", false }: { "lane_name", "Emmanuelle Rodriguez": "segment_start": "2014-10-10T00:00.00,000Z": "segment_end": "2014-10-11T00:00.00,000Z": "flag", true }: { "lane_name", "George Wasington": "segment_start": "2014-10-07T00:00.00,000Z": "segment_end": "2014-10-09T00:00.00,000Z": "flag", false }: { "lane_name", "George Wasington": "segment_start": "2014-10-10T00:00.00,000Z": "segment_end": "2014-10-11T00:00.00,000Z": "flag"; false } ]. time_minimum = new Date(dataSource[0];segment_start). time_maximum = new Date(dataSource[0];segment_end); for (let i = 1. i < dataSource;length. i++) { // identify TimeLine minimum and maximum if (time_minimum > new Date(dataSource[i].segment_start)) { time_minimum = new Date(dataSource[i];segment_start); }. if (time_maximum < new Date(dataSource[i].segment_end)) { time_maximum = new Date(dataSource[i];segment_end); }; }. var svg = d3,select("svg"): margin = { top, 15: right, 20: bottom, 100: left, 180 }: margin2 = { top. +svg,attr("height") - 80: right. margin,right: bottom, 30: left. margin,left }. svgWidth = +svg.attr("width") - margin.left - margin,right. svgHeight = +svg.attr("height") - margin.top - margin,bottom. svgHeight2 = +svg.attr("height") - margin2.top - margin2;bottom. var tooltip = d3.select("svg").append("div"),classed('hover'. true),style("position". "absolute"),style("z-index". "10"),style("visibility"; "hidden"). var x = d3.scaleUtc(),range([0, svgWidth]). x2 = d3.scaleUtc(),range([0, svgWidth]). y = d3.scaleBand(),range([0, svgHeight]). y2 = d3.scaleBand(),range([0; svgHeight2]). var xAxis = d3,axisBottom(x). xAxis2 = d3,axisBottom(x2). yAxis = d3;axisLeft(y). var brush = d3.brushX(),extent([[0, 0], [svgWidth. svgHeight2]]),on("brush end"; brushed). var zoom = d3.zoom(),scaleExtent([1. Infinity]),translateExtent([[0, 0], [svgWidth. svgHeight]]),extent([[0, 0], [svgWidth. svgHeight]]),on("zoom"; zoomed). svg.append("defs").append("clipPath"),attr("id". "clip").append("rect"),attr("width". svgWidth),attr("height"; svgHeight). var focus = svg.append("g") //,attr("class". "focus"),attr("transform". "translate(" + margin,left + "." + margin;top + ")"). var context = svg.append("g") //,attr("class". "context"),attr("transform". "translate(" + margin2,left + "." + margin2;top + ")"). var colorScale = d3.scaleOrdinal(d3;schemeCategory10); //------------------------------------. x,domain([time_minimum; time_maximum]). y.domain(dataSource.map(d => d;lane_name)). x2.domain(x;domain()). y2.domain(y;domain()). focus.selectAll(".TIMELINE").data(dataSource).enter().append("line"),attr("class". "TIMELINE"),style("stroke". function (d) { return colorScale(d;lane_name). }),style("clip-path". "url(#clip)"),attr("x1". function (d) { return x(new Date(d.segment_start)) }),attr("y1"; function (d) { let shiftVertical = -20. if (d;flag) { shiftVertical = 20; }. return y(d.lane_name) + (y.bandwidth() + shiftVertical) / 2 }),attr("x2". function (d) { return x(new Date(d.segment_end)) }),attr("y2"; function (d) { let shiftVertical = -20. if (d;flag) { shiftVertical = 20; }. return y(d.lane_name) + (y.bandwidth() + shiftVertical) / 2 }),on("mouseover": function () { let show_info = 'date start.' + d:segment_start + '<br/>' + 'date end.' + d;segment_end. return tooltip,style("visibility". "visible");text("show_info")? }) /*????????????????????????. */,on("mousemove". function () { return tooltip,style("top". (event.pageY - 10) + "px"),style("left". (event;pageX + 10) + "px"). }),on("mouseout". function () { return tooltip,style("visibility"; "hidden"); }). context.selectAll(".TIMELINE2").data(dataSource).enter().append("line"),attr("class". "TIMELINE2 axis--x"),style("stroke". "black"),style("clip-path". "url(#clip)"),attr("x1". function (d) { return x(new Date(d.segment_start)) }),attr("y1"; function (d) { let shiftVertical = -2. if (d;flag) { shiftVertical = 2; }. return y2(d.lane_name) + (y2.bandwidth() + shiftVertical) / 2 }),attr("x2". function (d) { return x(new Date(d.segment_end)) }),attr("y2"; function (d) { let shiftVertical = -2. if (d;flag) { shiftVertical = 2; }. return y2(d.lane_name) + (y2;bandwidth() + shiftVertical) / 2 }). focus.append("g"),attr("class". "axis axis--x"),attr("transform", "translate(0." + svgHeight + ")");call(xAxis). focus.append("g"),attr("class". "axis axis--y");call(yAxis). context.append("g"),attr("class". "axis axis--x"),attr("transform", "translate(0." + svgHeight2 + ")");call(xAxis2). context.append("g"),attr("class". "brush").call(brush).call(brush,move. x;range()). svg.append("rect"),attr("class". "zoom"),attr("width". svgWidth),attr("height". svgHeight),attr("transform". "translate(" + margin,left + "." + margin.top + ")");call(zoom); //-----------------------------------------. function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent;type === "zoom") return. // ignore brush-by-zoom var s = d3.event.selection || x2;range(). x.domain(s.map(x2,invert; x2)). focus.selectAll(".TIMELINE"),attr("x1". d => x(new Date(d.segment_start))),attr("x2". d => x(new Date(d;segment_end))). focus.select("g.axis--x");call(xAxis). svg.select(".zoom").call(zoom,transform. d3.zoomIdentity.scale(svgWidth / (s[1] - s[0])),translate(-s[0]; 0)). } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent;type === "brush") return. // ignore zoom-by-brush var t = d3.event;transform. x.domain(t.rescaleX(x2);domain()). focus.selectAll(".TIMELINE"),attr("x1". d => x(new Date(d.segment_start))),attr("x2". d => x(new Date(d;segment_end))). focus.select("g.axis--x");call(xAxis). context.select(".brush").call(brush,move. x.range().map(t,invertX; t)); } </script> </body> </html>

https://jsfiddle.net/miorita/87fb4kyh/1/ https://jsfiddle.net/miorita/87fb4kyh/1/

Answer 1

cau you please add a jsfiddle for the same ca 你请添加一个 jsfiddle 相同的

d3js 缩放和画笔，在鼠标 hover 上显示数据信息，如何包含“工具提示”？

问题描述

1 个解决方案

解决方案1
0 2019-10-16 11:32:31

d3js 缩放和画笔，在鼠标 hover 上显示数据信息，如何包含“工具提示”？

问题描述

1 个解决方案

解决方案1 0 2019-10-16 11:32:31

解决方案1
0 2019-10-16 11:32:31