Тики диаграммы маркера в D3 - пример Boothead - PullRequest
Новая
       14

Тики диаграммы маркера в D3 - пример Boothead

0 голосов
/ 11 октября 2018

Я пытаюсь, чтобы тикеты в диаграмме маркера D3 следовали за самими данными, как во 2-м примере здесь: Тики и метки в маркере в D3.js

Проблема в том, что источник этого (http://boothead.github.io/d3/ex/bullet.html) больше не существует в интернете, единственное, что есть в этом сообщении - gif, который я связал.

введите изображениеописание здесь У кого-нибудь есть оригинал этого проекта или есть какой-нибудь совет?

Я использую первый пример от mbostock и пытаюсь повторить нижний.

Большое спасибо

1 Ответ

0 голосов
/ 11 октября 2018

В оригинале bullet.js из примера bostock https://bl.ocks.org/mbostock/4061961

Вместо того, чтобы брать тики из шкалы, вы получаете значения из диапазона, измеряете и помечаете

вокруг линии109 

  // 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));
    });
}

Если в обновлении изменяется количество пулевых графиков,проблема в том, что они не создаются или удаляются при необходимости.Поэтому нам нужно создать функцию, которая будет использоваться для начальных и обновленных вызовов. 

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));
    });
}

Лучшее изменение в bullet.js [109] будет следующим: 

  // 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);

То естьне используйте значение галочки, чтобы соответствовать, если у нас есть несколько значений в галочках, и удалите дубликаты.

Нам также нужно изменить обновление тиков, примерно на 30 строк вниз 

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

до 

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