Question

所以我一直在研究d3.js一段时间，但不想问这样的问题，因为这是一项我一直在努力完成的简单任务。

我想使用带有两列的CSV文件创建d3.js树形图。姓名和号码。但是，我在版本4上遇到的所有树图都创建了一个层次结构。我不想使用层次结构。我找不到分层的工作。看看d3.js文档，我相信我找不到替代方案。

所以简单地说，我想创建一个d3。使用此csv数据的树形图。我想知道如何构造它以及如何将它发送到d3.treemap（）函数。

如果你能帮助我多多谢谢!!!

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

小提琴：https://jsfiddle.net/beaver71/061g1j6q/

d3.js简单的csv treemap两列

1 个答案: