Question

我发现这个滑块库在开始时就很有前途，但是在将其适应简化的数据集方面一直存在很大的困难。 this block启用了滑块。我正在尝试复制“纽约时报”品种。下面是我的片段，其中包含很小的硬编码数据集。

var margins = {top:20, bottom:300, left:100, right:100};

var height = 600;
var width = 1200;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var data = [
  {'manager':'ABC-CA', 'aum':230561804112.86996},
  {'manager':'AEGON-Industrial', 'aum':187676730861.82004},
  {'manager':'AVIC', 'aum':677643221.8599999},
  {'manager':'AXA-SPDB', 'aum':111220010833.66998},
  {'manager':'Baoying', 'aum':26328526612.41},
  {'manager':'Beixin Ruifeng', 'aum':10500065729.3},
  {'manager':'BOB-Scotiabank', 'aum':69159188249.67},
  {'manager':'BOC IM', 'aum':396466612963.73},
  {'manager':'BOCI Securities', 'aum':57940275708.97}
];

  var yExtents = d3.extent(data, function(d) {return d.aum; })

  var xScale = d3.scaleBand()
    .rangeRound([0, width])
    .domain(data.map(function(d) {return d.manager; }));

  var yScale = d3.scaleLinear()
      .range([height,0])
      .domain(yExtents);

  graphGroup.append("g")
      .attr("class", "axis axis--y")
      .attr("transform", "translate(0," + 0 + ")")
      .call(d3.axisRight(yScale))
      .selectAll("text")
      .attr('text-align','right')
      .attr("transform", "translate(-90,0)");

  graphGroup.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale))
      .selectAll("text")
      .attr("transform", "translate(0,0)");

  var bars = graphGroup.append('g')
    .selectAll('rect')
    .data(data);

  var barsEnter = bars
      .enter()
      .append('rect')
      .attr('x', function(d) {return xScale(d.manager); })
      .attr('y', function(d) {return yScale(d.aum); })
      .attr('width', xScale.bandwidth())
      .attr('height', function(d) {return height-yScale(d.aum); });

      var slider = g =>
        g.attr('transform', `translate(0,0)`).call(
          d3
            .sliderBottom(xScale)
            .step(1)
            .ticks(4)
            .default(9)
            .on('onchange', value => draw(value))
        );

        graphGroup.append('g').call(slider);

        var draw = selected => {
          barsEnter
            .merge(bars)
            .attr('fill', d => (d.manager === selected ? '#003366' : '#e0e0e0'));

          d3.select('p#value-new-york-times').text(
            d3.format('$,.2r')(data[selected - 1].value)
          );
        };

        draw(9);

<div class="row align-items-center">
  <div class="col-sm-2"><p id="value-new-york-times"></p></div>
  <div class="col-sm"><div id="slider-new-york-times"></div></div>
</div>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://unpkg.com/d3-simple-slider"></script>

该脚本由于引用d3-simple-slider @第2行而崩溃：

TypeError：h.clamp不是函数

在示例中运行正常，但在我的数据集上崩溃。实际上，我有完全相同的实现，只是数据集和svg容器不同。据我所知，这些差异不应该破坏交易。

问题

在d3社区中有对此特定库有经验的人能否提供一些有关脚本为何崩溃的见解？

简单数据集上的d3滑块库

问题

0 个答案: