Привязать данные к меткам оси - PullRequest
Новая
       26

Привязать данные к меткам оси

0 голосов
/ 26 мая 2018

Я использую d3 v4.Я хочу привязать данные d.name к меткам оси.Но используйте разные значения, d.num, в данных для домена. 

d3.json("data.json", function(error, newdata) {
    if (error) throw error;

    data = newdata;
    var name = [];

    // data.forEach(function(d) {
    //   // console.log(d.name);
    //   if (name.length < data.length - 1) {
    //     // console.log("name.length = " + name.length);
    //     name.push(d.name);
    //   }
    // });

    // xAxis = d3.axisBottom(x).tickSize(0);

    xAxis = d3.axisBottom(x).tickSize(0).tickFormat(function(d, i) {
      console.log("name[" + i + "] = " + name[i]);
      console.log("data[" + i + "].name: " + data[i].num);
      // return name[i];
      return d.name;
    }).ticks(name.length).tickSize(10);

............

});

Данные, 

[{
    "name": "A",
    "num": "1",
    "distance": "1900"
  },
  {
    "name": "B",
    "num": "2",
    "distance": "1500"
  },
  {
    "name": "C",
    "num": "3",
    "distance": "2500"
  },
  {
    "name": "D",
    "num": "4",
    "distance": "2300"
  },
  {
    "name": "E",
    "num": "5",
    "distance": "2000"
  }
]

Проблема в том, что данные не связаны с переменной xAxis.Как я могу это сделать?

Как видно из закомментированного раздела кода, я попытался передать значения d.name в массив с именем name.Но это вызывает проблемы позже, поэтому я пытаюсь привязать фактические данные d.name к меткам.

Есть похожий пост Привязать данные к меткам оси d3.js но это был 2010 год и так не для v4.Также я не уверен, как применить это в моей ситуации.

Спасибо,

1 Ответ

0 голосов
/ 26 мая 2018

Существует привязка к каждому тику на оси: это элементы в области шкалы, переданной на ось.

В вашей конкретной ситуации, лучшая идея может быть использована filterс нулевым индексом (или find, если браузер поддерживает его), чтобы получить объект в массиве данных на основе данных галочки (опять же, соответствующих области шкалы).

Однако, отвечаяЗаголовок вашего вопроса ( "Как связать данные с осью" ), вы можете сделать это, непосредственно манипулируя первым аргументом (например, внутри tickFormat или даже функцией each).Тем не менее, это будет мешать текущим данным.

Более безопасный подход - использование локальной переменной , например ... 

var local = d3.local();

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

Посмотрите на эту демонстрацию, ось сделана с использованием шкалы, которая имеет num для домена, но она изменится через 1 секунду.для свойства name, используя привязанную к ним локальную переменную: 

var data = [{
    num: 1,
    name: "foo"
  },
  {
    num: 2,
    name: "bar"
  },
  {
    num: 3,
    name: "baz"
  }
];

var svg = d3.select("svg");

var local = d3.local();

var scale = d3.scalePoint()
  .range([50, 250])
  .domain(data.map(function(d) {
    return d.num
  }))

var axis = d3.axisBottom(scale)
  .tickFormat(function(d, i) {
    local.set(this, data[i].name);
    return d;
  })

var gX = svg.append("g")
  .attr("transform", "translate(0,100)")
  .call(axis);

d3.timeout(function() {
  axis.tickFormat(function() {
    return local.get(this)
  });
  gX.call(axis)
}, 1000)
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
...