Question

我正在尝试从某些csv数据创建堆积条形图。阅读了Scott Murray的教程http://alignedleft.com/tutorials/d3/（作为旁白：这是关于d3.js的最佳教程，我已经遇到并且应该真正链接到d3 wiki），以及Andrew Davis的教程我一起散步以下试用代码来创建我需要的rects：

window.onload = function()
{
var LikertData = [{a:0,b:1},{a:0,b:1},{a:0,b:1},{a:0,b:1},];
var w = 200;
var h = 200;

var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

var myG  = svg.selectAll("g")
        .data(LikertData)
        .enter()
        .append("g")
        .text(function(d)
        {
        var myRect = d3.selectAll("rect")
        .data(d.entries)
        .enter()
        .append("rect");
        return myRect;
            });
}

这个想法是，对于形成LikertData数组的每个数组，都会将一个rect添加到父g元素中。但是，它不起作用。我有丝毫温暖吗？

编辑：这更接近我想要的东西 - 我已经指出了.data让我感到困惑以及我想用于数据：

window.onload = function()
{
    d3.csv("likert.csv", function(LikertData){
        var svg = d3.select("body").append("svg")

        var myG  = svg.selectAll("g")
            .data(LikertData)
            .enter()
            .append("g")
            .selectAll("rect")
            .data()//<--I want data to use an array of key values for the parent g's d
            .enter()
            .append("rect");
    });
}

使用console.log（d3.entries（LikertData））产生多个对象，如下所示 - 因此数据是关联的：

[
Object
    key: "50"
    value: Object
        Agree: ""
        Always: "39.1%"
        Disagree: ""
        Neutral: ""
        Never: "4.3%"
        Row Labels: "I run out of time in long tasks"
        Sometimes: "52.2%"
        Strongly Agree: ""
        Strongly Disagree: ""
        Unanswered: "4.3%"
        __proto__: Object
    __proto__: Object
]

Answer 1

不太远。尝试

var LikertData = [{a:0,b:1},{a:0,b:1},{a:0,b:1},{a:0,b:1},];
var w = 200; var h = 200; 

var svg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h);

var myG  = svg.selectAll("rect")
  .data(LikertData).enter()
  .append("rect")
  .attr("x", function(d, i) { return i * 50; })
  .attr("y", function(d, i) { return i * 50; })
  .attr("width", 50)
  .attr("height", 50);

x和y属性定位矩形，您需要为它们指定宽度和高度。如果您想将它们包含在g元素中，只需在调用.append("g")之前添加data() - 但这不是必需的。

text函数只应用于设置文本内容 - 不要用它来添加新元素。您也没有嵌套数组，因此只需要调用一次.data()。

Answer 2

简化最终代码 - 改变解析csv的方式以利用parseRows函数导致创建一个数组数组，允许我将外部d作为.data的源：

window.onload = function()
{   
    d3.text("likert.csv", function(LikertData){
        var parsedData = d3.csv.parseRows(LikertData);

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

        var g = svg.selectAll("g")
        .data(parsedData)
        .enter()
        .append("g");

        var gRect = g.selectAll("rect")
            .data(function(d){return d})
            .enter()
            .append("rect");

    });
}

关联数组并使用父d作为selection.data（）的源数组

2 个答案: