Question

根据第二个示例，我正在尝试使D3项目符号图中的图表票证跟随数据本身： Bullet chart ticks & labels in D3.js

问题是此（http://boothead.github.io/d3/ex/bullet.html）的来源不再存在于互联网上，唯一的问题是我链接的这篇文章中的gif。

enter image description here 是否有人拥有该项目的原始副本或有任何建议？

我正在使用mbostock的第一个示例，并尝试复制最下面的示例。

非常感谢

Answer 1

在bostock示例https://bl.ocks.org/mbostock/4061961中的原始func addAttachmentUtil() { print("file attacher") let file = UIImagePickerController() file.delegate = self file.sourceType = UIImagePickerControllerSourceType.photoLibrary file.mediaTypes = ["public.image", "public.movie"] file.videoMaximumDuration = 5.0 file.allowsEditing = false self.present(file, animated: true) { } }

不是从刻度中获取刻度，而是从范围，度量和标记中获取值

在109行更改

bullet.js

编辑

如果您基于从服务器获取的新数据来更新数据，则会出现问题。一些the虫最终出现在错误的位置。如果标记，度量，范围的数量也发生变化，它们也会以错误的位置结束。

这取决于您为项目符号调用选择的内容。

混乱是由于主程序命名不当所致。

  // var tickVals = x1.ticks(8);
  var tickVals = rangez.concat(measurez).concat(markerz);
  // Update the tick groups.
  var tick = g.selectAll("g.tick")
      .data(tickVals, function(d) {
        return this.textContent || format(d);
      });

名称表明var svg = d3.select("body").selectAll("svg") .data(data) .enter().append("svg") .attr("class", "bullet") .attr("width", svgWidth) .attr("height", svgHeight) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(chart);是svg元素的选择。这是不正确的，它是svg个元素的选择。

g函数应反映出这一点

update()

如果项目符号图的数目在更新时发生更改，则存在无法根据需要创建或删除它们的问题。因此，我们需要制作一个可用于初始和更新调用的函数。

function updateData() {
    d3.json("mailboxes.json", function (error, data) {
        d3.select("body")
          .selectAll("svg")
          .select('g')
          .data(data)
          .call(chart.duration(500));
    });
}

bullet.js [109]中的一个更好的更改是：

function drawCharts() {
    d3.json("mailboxes.json", function (error, data) {
        var svg = d3.select("body").selectAll("svg").data(data);
        svg.exit().remove();
        svg.enter().append("svg")
            .attr("class", "bullet")
            .attr("width", svgWidth)
            .attr("height", svgHeight)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.select("body")
          .selectAll("svg")
          .select('g')
          .data(data)
          .call(chart.duration(500));
    });
}

这是不要使用刻度的值进行匹配，以防我们在刻度中有多个值并删除重复的值。

我们还需要更改刻度线的更新，向下大约30行

  // var tickVals = x1.ticks(8);
  var tickVals = [];
  rangez.concat(measurez).concat(markerz).forEach(e => {
      if (tickVals.indexOf(e) == -1) tickVals.push(e);
  });
  // Update the tick groups.
  var tick = g.selectAll("g.tick").data(tickVals);

到

  tickUpdate.select("text")
      .attr("y", height * 7 / 6);

D3中的项目符号图滴答声-标头示例

1 个答案: