javascript - d3.js 简单的 csv 树形图两列

Question

所以我已经对 d3.js 进行了一段时间的研究，但不想问这样的问题，因为这是一个如此简单的任务，我一直在努力完成。

我想使用包含两列的 CSV 文件创建一个 d3.js 树状图。姓名和号码。但是，我在版本 4 上遇到的所有 TreeMap 都创建了一个层次结构。我不想使用层次结构。我无法从分层中找到解决方法。查看 d3.js 文档，我相信我还没有找到替代方案。

很简单，我想创建一个 d3.使用此 csv 数据的树状图。我想知道如何构造它以及如何将它发送到 d3.treemap() 函数。

如果你能帮助我非常感谢!!!

数据.csv

content,count
apple,10
oranges,20
strawberry,30
pineapple,40
kiwi,50

Answer 1

这是一个 d3.v4 的例子:

var vWidth = 600;
var vHeight = 400;
// Prepare our physical space
var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight).select('g');

// Get the data from our CSV file
/*var csv_url = "https://gist.githubusercontent.com/denjn5/bb835c4fb8923ee65a13008832d2efed/raw/9e8d621174aba36624311944a93cdf8d96109099/data.csv";
d3.csv(csv_url, function(error, vCsvData) {
  if (error) throw error;
  vData = d3.stratify()(vCsvData);
  drawViz(vData);
});*/

// Get the data from our CSV string
var csvString = 'content,parent,count\n';
csvString += 'fruit,\n';
csvString += 'apple,fruit,10\n';
csvString += 'oranges,fruit,20\n';
csvString += 'strawberry,fruit,30\n';
csvString += 'pineapple,fruit,40\n';
csvString += 'kiwi,fruit,50\n';

var data = d3.csvParse(csvString);
var stratify = d3.stratify()
  .id(function(d) { return d.content; })
  .parentId(function(d) { return d.parent; });
var treeData = stratify(data);
// assign the name to each node
treeData.each(function(d) {
    d.name = d.id;
});
  
drawViz(treeData, data);

function drawViz(vData, data) {
  // Declare d3 layout
  var vLayout = d3.treemap().size([vWidth, vHeight]).
  paddingOuter(3);
  // Layout + Data
  var vRoot = d3.hierarchy(vData).sum(function (d) {
  	return d.data.count;
  });
  var vNodes = vRoot.descendants();
  vLayout(vRoot);
  var vSlices = g.selectAll('rect').data(vNodes).enter().append('rect');
  // Draw on screen
  vSlices.attr('x', function (d) { return d.x0; })
    .attr('y', function (d) { return d.y0; })
    .attr('width', function (d) { return d.x1 - d.x0; })
    .attr('height', function (d) { return d.y1 - d.y0; });      
    
  g.selectAll('g').data(vNodes).enter()
  .append('text')
  .attr('x', function (d) { return d.x0; })
  .attr('y', function (d) { return d.y0; })
  .text(function(d) { if (d.data.depth>0) return d.data.id; })
  .attr("dy", "1em")
  .attr("dx", "1em");
}

rect {
  fill: #8d4705;
  opacity: 0.3;
  stroke: #FF0000;
  stroke-width: 2px;
}

text {
  stroke: #FF0000;
  stroke-width: 1px;
  font-family: 'Verdana';
  font-size: 12px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg>
    <g></g>
</svg>

更新:

如果 CSV 数据不是分层形式，可以使用 csvParse() 中的行转换函数来适配数据:

var csvString = 'content,count\n';
csvString += 'apple,10\n';
csvString += 'oranges,20\n';
csvString += 'strawberry,30\n';
csvString += 'pineapple,40\n';
csvString += 'kiwi,50\n';
// trasform in hierarchical
var data = d3.csvParse(csvString, function(d) {
  return {
    content: d.content,
    parent:"fruit",
    count: d.count,
  };
});
// add first element
data.unshift({content: "fruit", parent: "", count: undefined});

fiddle :https://jsfiddle.net/beaver71/061g1j6q/