Question

我正在使用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绑定到标签。

有一个类似的帖子Bind data to axis ticks d3.js，但这是2010年，因此不适用于v4。此外，我不确定如何在我的情况下应用它。

谢谢，

Answer 1

轴上的每个刻度都有一个数据：它是传递给轴的刻度域中的元素。

在您的具体情况下，最好的想法可能是使用filter零索引（或find，如果浏览器支持它），以根据数据获取数据数组中的对象勾选（再次，对应于比例域）。

但是，回答你问题的标题（＆＃34;如何将数据绑定到轴＆＃34; ），你可以通过直接操纵第一个参数（在{{例如，1}}，甚至是tickFormat函数。但是，这会弄乱当前的数据。

更安全的方法是使用local variable，例如......

each

...您可以使用它来通过索引获取数据数组中的对象。之后，局部变量将绑定到DOM元素。

看一下这个演示，轴是使用域var local = d3.local();的缩放，但是num属性在1秒后会改变，使用绑定到的局部变量它们：

＆＃13;

name

＆＃13;

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)

＆＃13;

将数据绑定到轴标签

1 个答案: