2

我正在尝试从一些 csv 数据创建堆积条形图。阅读了 Scott Murray 的教程http://alignedleft.com/tutorials/d3/（顺便说一句：这是我遇到的关于 d3.js 的最佳教程，应该在 d3 wiki 上真正链接），以及 Andrew Davis 的教程我将以下试用代码散列在一起以创建我需要的矩形：

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 数组的每个数组，将一个矩形添加到父 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
]
4

2 回答 2

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().

于 2012-08-21T14:53:34.950 回答
1

最终代码简化 - 更改 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");

    });
}
于 2012-08-22T10:59:49.710 回答