Question

我无法理解何时以及如何使用嵌套数据。

在这个例子中，我有一个名称（'Name'）和位置（'起点'）的CSV。通过为位置分配键，我可以制作一个包含所有位置的下拉列表，我想用它来过滤与每个位置相关联的名称。

但是我无法找到数据的值，在本例中为'd.Name'

在更新函数内部，我试图访问数据连接上的“值”。

  var adventurer = canvas
      .selectAll(".adventurer")
      .data(function(d) {
        return d.values;
      })

我也试过创建一个额外的数据变量，但这对我来说也不起作用。

对不起，我不能成为一个jsfiddle，但这里是plunk

DATA

,,Name,First names,s,r,Nat,born,starting point,starting date,arrival date,days,km,Assist,Support,Style,note,arrival date 2
1,1,KAGGE,Erling,,,Nor,1/15/1963,Berkner Island,11/18/1992,1/7/1993,50,appr. 1300,n,n,solo,first solo unassisted,
2,2,ARNESEN,Liv,f,,Nor,6/1/1953,Hercules Inlet,11/4/1994,12/24/1994,50,1130,n,n,solo,first woman unassisted,
3,3,HAUGE,Odd Harald,,,Nor,1956,Berkner Island,11/4/1994,12/27/1994,54,appr. 1300,n,n,,,

HTML

<div id="menu"></div>
<div id="chart"></div>

SCRIPT

  d3.csv("data.csv", function(csv_data) {

  var data = d3.nest()
    .key(function(d) {
      return d['starting point'];})
      .sortKeys(d3.ascending)
    .entries(csv_data)
  console.log(data);

  //create dropdown select

  var list = d3.select("#menu").append("select")

  list.selectAll("option")
    .data(data)
    .enter().append("option")
    .attr("value", function(d) {
      return d.key;
    })
    .text(function(d) {
      return d.key;
    });

  //chart config

  var w = 375,
      h = 1000;

  var canvas = d3.select('#chart')
    .append('svg')
    .attr('width', w)
    .attr('height', h)
    .append('g')
    .attr('transform', 'translate (0,50)');

  //function (bind, add, remove, update)

  function updateLegend(data) {

    var adventurer = canvas
      .selectAll(".adventurer")
      .data(function(d) {
        return d.values;
      })

    var adventurerEnter = adventurer
      .enter().append("g")
      .attr('class', 'adventurer');

    adventurerEnter
      .append("text")
      .attr('class', 'name')
      .attr('x', 0);

    adventurer.select('.name')
      .text(function(d, i) {
        return d.Name;
      })
      .attr('y', function(d, i) {
        return i * 30;
      });

    // remove old elements
    adventurer.exit().remove();

  };

  // generate initial legend
  updateLegend(data);

});

// handle on click event

  d3.select('#menu')
    .on('change', function() {
    var data = eval(d3.select(this).property('value'));
    console.log(data)
    updateLegend(data);
  });

Answer 1

您需要显示位置和名称。您有位置/名称的嵌套（在插件中但不在您的问题中），但您还需要一个不同的名称列表，或者可能是名称/位置列表：

fread(&buffer, 256, 1, file);

然后你必须显示你想要的名字。然后你需要一个.on（'change'，function（）...）处理程序（或点击或任何符合你需要的处理程序），它实际上过滤了显示它们的名字。

我还修复了你的排序。 d3.ascending是数字，而不是字符串。

在D3中访问嵌套数据

1 个答案: