所有刷子没有缩放

我正在使用焦点+上下文d3可视化。我正在使用路径而不是面积图，这是bl.ocks.org上的示例。不幸的是，我无法正常工作。我很快注意到我并不是唯一一个努力重新定位这个图表的人。看到这个帖子：所有刷子没有缩放

我刷的作品，但对于焦点的变焦似乎并没有工作。我不确定为什么3天后我还没有解决它。我花了很多时间和很多例子，以便我能够从别人的错误中吸取教训。在之前的文章中，url（#clip）是个问题，但是在我的图表中，问题似乎是使用画笔/缩放功能更多的问题。另一件令我沮丧的事情是我正在使用d3版本3，所以当前的示例块并不容易从中推断出事情。 d3 v4中的语法/函数调用有很多不同之处。

臭名昭著bruzh放大d3.v4.js块： https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我不知道为什么有那么多的挣扎与此有关。也许我们都只是粗心大意，但我怀疑在这里可能会有一些棘手/微妙的事情发生。

有人可以在d3.v3上为我的图表发表小提琴或功能缩放块吗？我很想看看你是如何做到的。

这里是我的块： https://bl.ocks.org/diggetybo/f46ebec18dda16bf39f41b9282b5b593

这里是全屏幕图： https://bl.ocks.org/diggetybo/raw/f46ebec18dda16bf39f41b9282b5b593/

非常感谢

来源

2016-10-03 Arash Howaida

你以前的计算器问题链接包含V3为例[这里]（http://jsfiddle.net/JGytk/）。 – Mark

你是不是 “重绘” 在你刷事件行路径：

var brush = d3.svg.brush() 
    .x(xScaleBottom) 
    .on('brush', function brushed() { 
    xScaleTop.domain(brush.empty() ? xScaleBottom.domain() : brush.extent()); 
    focus.select('.line').attr('d', lineTop); //<-- REDRAW LINE 
    focus.select('.x.axis').call(xAxisTop); 
    });

请注意，您还有一个brushed函数它没有被使用（花了我一秒钟找到实际的事件处理程序）。

这是你的代码运行：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Focus + Context</title> 
 
    <style type="text/css"> 
 
    p { 
 
     color: white 
 
    } 
 
    
 
    body { 
 
     background-color: #282c34 
 
    } 
 
    </style> 
 
    <meta charset="utf-8"> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
</head> 
 

 
<body style="overflow: hidden"> 
 
    <p>Programming underway, please stand by.</p> 
 
    <script> 
 
    var width = 600, 
 
     height = 400; 
 

 
    var margins = { 
 
     top: 10, 
 
     left: 50, 
 
     right: 50, 
 
     bottom: 50, 
 
     between: 50 
 
    }; 
 

 
    var bottomGraphHeight = 50; 
 
    var topGraphHeight = height - (margins.top + margins.bottom + margins.between + bottomGraphHeight); 
 
    var graphWidths = width - margins.left - margins.right; 
 

 
    var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', width) 
 
     .attr('height', height) 
 
     .style('font', '10px sans-serif'); 
 

 
    svg.append('defs') 
 
     .append('clipPath') 
 
     .attr('id', 'clip') 
 
     .append('rect') 
 
     .attr('width', width) 
 
     .attr('height', height); 
 

 
    var focus = svg 
 
     .append('g') 
 
     .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); 
 

 
    var context = svg.append('g') 
 
     .attr('class', 'context') 
 
     .attr('transform', 'translate(' + margins.left + ',' + 
 
     (margins.top + topGraphHeight + margins.between) + ')'); 
 

 
    var xScaleTop = d3.scale.linear().range([0, graphWidths]), 
 
     xScaleBottom = d3.scale.linear().range([0, graphWidths]), 
 
     yScaleTop = d3.scale.linear().range([topGraphHeight, 0]), 
 
     yScaleBottom = d3.scale.linear().range([bottomGraphHeight, 0]); 
 

 
    var xAxisTop = d3.svg.axis().scale(xScaleTop).orient('bottom'), 
 
     xAxisBottom = d3.svg.axis().scale(xScaleBottom).orient('bottom'); 
 
    var yAxisTop = d3.svg.axis().scale(yScaleTop).orient('left'); 
 

 
    var lineTop = d3.svg.line() 
 
     .x(function(d, i) { 
 
     return xScaleTop(i); 
 
     }) 
 
     .y(function(d) { 
 
     return yScaleTop(d.y2); 
 
     }); 
 

 
    var lineBottom = d3.svg.line() 
 
     .x(function(d, i) { 
 
     return xScaleBottom(i); 
 
     }) 
 
     .y(function(d) { 
 
     return yScaleBottom(d.y2); 
 
     }); 
 

 
    var brush = d3.svg.brush() 
 
     .x(xScaleBottom) 
 
     .on('brush', function brushed() { 
 
     xScaleTop.domain(brush.empty() ? xScaleBottom.domain() : brush.extent()); 
 
     focus.select('.line').attr('d', lineTop); 
 
     focus.select('.x.axis').call(xAxisTop); 
 
     }); 
 

 

 
    var url = "https://gist.githubusercontent.com/diggetybo/f46ebec18dda16bf39f41b9282b5b593/raw/70c279b9aef16f5348bc3185909c4b001414a611/wav_2.tsv"; 
 
    d3.tsv(url, function(error, rawData) { 
 
     var data = rawData.map(function(d) { 
 
     return { 
 
      y2: +d.wav1 
 
     } 
 
     }); 
 

 
     xScaleTop.domain(d3.extent(data, function(d, i) { 
 
     return i; 
 
     })); 
 
     yScaleTop.domain([-.02, .02]); 
 
     xScaleBottom.domain(d3.extent(data, function(d, i) { 
 
     return i; 
 
     })); 
 
     yScaleBottom.domain([-.02, .02]); 
 

 
     var topXAxisNodes = focus.append('g') 
 
     .attr('class', 'x axis') 
 
     .attr('transform', 'translate(' + 0 + ',' + (margins.top + topGraphHeight) + ')') 
 
     .call(xAxisTop); 
 
     styleAxisNodes(topXAxisNodes, 0); 
 

 
     focus.append('path') 
 
     .datum(data) 
 
     .attr('class', 'line') 
 
     .attr('d', lineTop); 
 

 
     var topYAxisNodes = focus.append('g') 
 
     .call(yAxisTop); 
 
     styleAxisNodes(topYAxisNodes); 
 

 
     context.append('path') 
 
     .datum(data) 
 
     .attr('class', 'line') 
 
     .attr('d', lineBottom); 
 

 
     var bottomXAxisNodes = context.append('g') 
 
     .attr('transform', 'translate(0,' + bottomGraphHeight + ')') 
 
     .call(xAxisBottom); 
 
     styleAxisNodes(bottomXAxisNodes, 0); 
 

 
     context.append('g') 
 
     .attr('class', 'x brush') 
 
     .call(brush) 
 
     .selectAll('rect') 
 
     .attr('y', -6) 
 
     .attr('height', bottomGraphHeight + 7); 
 

 
     context.selectAll('.extent') 
 
     .attr({ 
 
      stroke: '#000', 
 
      'fill-opacity': 0.125, 
 
      'shape-rendering': 'crispEdges' 
 
     }); 
 

 
     styleLines(svg); 
 
    }); 
 

 
    function styleLines(svg) { 
 
     svg.selectAll('path.line') 
 
     .attr({ 
 
      fill: 'none', 
 
      'stroke-width': 1.5, 
 
      stroke: 'steelblue', 
 
      'clip-path': 'url(#clip)' 
 
     }); 
 
    } 
 

 
    function styleAxisNodes(axisNodes, strokeWidth) { 
 
     axisNodes.selectAll('.domain') 
 
     .attr({ 
 
      fill: 'none', 
 
      'stroke-width': strokeWidth, 
 
      stroke: 'black' 
 
     }); 
 
     axisNodes.selectAll('.tick line') 
 
     .attr({ 
 
      fill: 'none', 
 
      'stroke-width': 1, 
 
      stroke: 'black' 
 
     }); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

来源

2016-10-03 15:15:45 Mark

所有刷子没有缩放

回答

相关问题