JavaScript — D3js v.4 .call (brush.clear ())

D3js v.4 .call (brush.clear ())

Моя задача — организовать визуализацию временной шкалы.

Я преобразовал в мой случай пример https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 .

Я пишу в D3js v4. Я должен сделать эффект HOVER, как в случае http://bl.ocks.org/wrobstory/7612013 , но он написан в v3.

Я нашел решение https://softeng.oicr.on.ca/jeffrey_burt/2017/01/16/d3-brush/, но оставил небольшое недоразумение, вызвав в консоли ошибку: «Uncaught ReferenceError: обертка не определена»

Какую обертку я должен определить?

Код работает, но в консоли возникает ошибка https://jsfiddle.net/miorita/87fb4kyh/14/

  {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge"{amp}gt; {amp}lt;title{amp}gt;QUESTION{amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" href="css/normalize.css"{amp}gt; {amp}lt;style{amp}gt; .zoom { cursor: move; fill: none; pointer-events: all; } .TIMELINE { stroke-width: 20px; stroke-opacity: 0.5; } .TIMELINE2 { stroke-width: 1px; stroke-opacity: 0.5; } div.tooltip { position: absolute; text-align: left; width: 70px; height: 28px; padding: 3px; font: 11px sans-serif; background: lightsteelblue; border: 0px; border-radius: 3px; pointer-events: none; } {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;svg width="1200" height="300"{amp}gt;{amp}lt;/svg{amp}gt; {amp}lt;script src="https://d3js.org/d3.v4.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; d3.helper = {}; d3.helper.tooltip = function () { var tooltipDiv; var bodyNode = d3.select('body').node(); function tooltip(selection) { selection.on('mouseover.tooltip', function (pD, pI) { // Clean up lost tooltips d3.select('body').selectAll('div.tooltip').remove(); // Append tooltip tooltipDiv = d3.select('body') .append('div') .attr('class', 'tooltip') var absoluteMousePos = d3.mouse(bodyNode); tooltipDiv.style({ left: (absoluteMousePos[0]   10)   'px', top: (absoluteMousePos[1] - 40)   'px', 'background-color': '#d8d5e4', width: '85px', height: '30px', padding: '5px', position: 'absolute', 'z-index': 1001, 'box-shadow': '0 1px 2px 0 red' }); var first_line = '{amp}lt;p{amp}gt;Start time: '   pD.segment_start   '{amp}lt;/p{amp}gt;' var second_line = '{amp}lt;p{amp}gt;End time: '   pD.segment_end   '{amp}lt;/p{amp}gt;' tooltipDiv.html(first_line   second_line) }) .on('mousemove.tooltip', function (pD, pI) { // Move tooltip var absoluteMousePos = d3.mouse(bodyNode); tooltipDiv.style({ left: (absoluteMousePos[0]   10)   'px', top: (absoluteMousePos[1] - 40)   'px' }); }) .on('mouseout.tooltip', function (pD, pI) { // Remove tooltip tooltipDiv.remove(); }); } tooltip.attr = function (_x) { if (!arguments.length) return attrs; attrs = _x; return this; }; tooltip.style = function (_x) { if (!arguments.length) return styles; styles = _x; return this; }; return tooltip; }; var time_minimum, time_maximum, 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 {amp}lt; dataSource.length; i  ) { // identify TimeLine minimum and maximum if (time_minimum {amp}gt; new Date(dataSource[i].segment_start)) { time_minimum = new Date(dataSource[i].segment_start); }; if (time_maximum {amp}lt; 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 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("end", brushend); 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 ={amp}gt; 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 }) .call(d3.helper.tooltip()); 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 brushend() { if (d3.event.sourceEvent {amp}amp;{amp}amp; 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 ={amp}gt; x(new Date(d.segment_start))) .attr("x2", d ={amp}gt; 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)); var selection = d3.event.selection; if (!selection) return; // this wrapper ????? wrapper.select('.brush').call(brush.move, null); brushed(selection); } function brushed(selection) { // handle selection x.domain(d3.event.selection); transition_data(); reset_axis(); } function transition_data() { svg.select("svg") .data(dataSource) .transition() .duration(500); } function reset_axis() { svg.transition().duration(500) .select(".x.axis") .call(xAxis); } function zoomed() { if (d3.event.sourceEvent {amp}amp;{amp}amp; 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 ={amp}gt; x(new Date(d.segment_start))) .attr("x2", d ={amp}gt; 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)); } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector