个人中心
gpt4 book ai didi

javascript - 全画笔无缩放

转载 作者：行者123 更新时间：2023-12-03 05:58:32 24 4
gpt4 key购买 nike

我正在使用焦点 + 上下文 d3 可视化。我使用的是路径而不是面积图，这是 bl.ocks.org 上的示例。不幸的是，我无法让它正常工作。我很快注意到我并不是唯一一个努力重新调整这张图的人。请参阅这篇文章:

D3.js Focus + Context Overflow

我的画笔可以工作，但焦点缩放似乎不起作用。我不知道为什么三天后还没有解决。我有很多时间和很多例子，这样我就可以从别人的错误中学习。在上一篇文章中，url(#clip) 是问题所在，但是，在我的图表中，问题似乎更多是画笔/缩放功能的问题。另一件让我困惑的事情是我使用的是 d3 版本 3，所以当前的示例 block 不太容易从中推断出事情。 d3 v4 中的语法/函数调用有很多差异。

d3.v4.js 中臭名昭著的 bruzh 缩放 block : https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我想知道为什么这么多人为此苦苦挣扎。也许我们只是粗心，但我怀疑这里也可能发生了一些棘手/微妙的事情。

有人可以在 d3.v3 中为我的图表发布 fiddle 或功能缩放 block 吗？我很想看看你是如何做到的。

这是我的 block : https://bl.ocks.org/diggetybo/f46ebec18dda16bf39f41b9282b5b593

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

非常感谢

最佳答案

您没有在画笔事件中“重绘”线条路径:

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>

关于javascript - 全画笔无缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39830232/

24 4 0
文章推荐： python - 按字典中的值过滤项目
文章推荐： android - 在YouTube Android应用中打开YouTube链接
文章推荐： unit-testing - Azure cmdlet 调用上出现 Pester 模拟错误 PSInvalidCastException
文章推荐： java - 我的 Java GUI 应该使用哪个 LayoutManager？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com