javascript - 实现 D3FC-Sample 以减少数据

Question

我在正确实现 javascript 库(特别是 d3fc-sample)时遇到问题。我发现这是一种数据缩减算法，对于减轻可视化大型数据集的负担很有用。这是存储库:

https://github.com/d3fc/d3fc-sample

我按照 github 说明进行操作。这是我所做的:

1. 下载了node.js
2. node.js 命令提示符:cd local_host_directory
3. node.js 命令提示符:npm install d3fc-sample -g
4. 尝试导入到我的 d3 脚本中

但是，当我尝试在浏览器中运行该页面时，这种方法不起作用。开发人员工具给了我一个错误，内容是“fc-sample is not Defined”。所以我断言 npm 方法不起作用。之后，我还尝试使用如下标签: <script>src=file_path.largestTriangleThreeBucket.js</script> 。这也没有改变任何事情。我对node.js知之甚少，我怀疑我做错了什么。如果您有任何提示，请留言。不涉及 Node.js 的库导入解决方案也是受欢迎的。

你可以在这里看到我的index.html:https://gist.github.com/diggetybo/f46ebec18dda16bf39f41b9282b5b593

或者直接下面的js脚本:

<script>
    var width = 600,
      height = 400;

    var margins = {
      top: 10,
      left: 50,
      right: 50,
      bottom: 10,
      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
        }
      });

var sampler = fc_sample.largestTriangleThreeBucket();


sampler.x(function (d,i) { return i; })
    .y(function (d) { return y2; });

sampler.bucketSize(10);

var sampledData = sampler(data);



      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(sampledData)
        .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>

Answer 1

您正在尝试使用属于 ES6 模块的 JavaScript 文件。这些不能直接加载到浏览器中，您应该使用代码的“捆绑”版本。

最简单的方法是通过顶级 d3fc bundle ，如下所示:https://d3fc.io/introduction/getting-started.html