D3从csv填充数据集失败

D3 filling dataset from csv failing

本文关键字：数据集 失败 填充 csv D3      更新时间：2023-09-26

我是D3的新手，但我正试图将一些bl.ock代码转换为我的要求。

我使用的示例在html文件中有一个静态数据字典-我试图将其转换为使用csv中的数据。

我的csv文件如下:


类别,测量山姆,0.3
彼得,0.25
约翰,0.15
瑞克,0.05
莱尼,0.18
保罗,0.04
史蒂夫,

0.03

我试过的代码如下:

var dataset = d3.map();
dataset = d3.csv("http://blahblah/testingtesting/DThree/PieChart.csv"
                , function(d) { dataset.set(d.category, +d.measure); }) 
function dsPieChart() {
    var width = 400,
        height = 400,
        outerRadius = Math.min(width, height) / 2,
        innerRadius = outerRadius * .999,
        // for animation
        innerRadiusFinal = outerRadius * .5,
        innerRadiusFinal3 = outerRadius * .45,
        color = d3.scale.category20() 
    ;
    var vis = d3.select("#pieChart")
        .append("svg:svg")
        .data([dataset])
        .attr("width", width)
        .attr("height", height)
        .append("svg:g") 
        .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
    ;
    ..
    ...
    ....

饼不出现时使用上述-是否有一个范围问题，在dsPieChart()以外的填充数据集意味着它是不可达的，或者我只是没有正确使用d3.csv ?

注意

原始代码是这样的:

function dsPieChart() {
    var dataset = [{
        category: "Sam",
        measure: 0.30
    }, {
        category: "Peter",
        measure: 0.25
    }, {
        category: "John",
        measure: 0.15
    }, {
        category: "Rick",
        measure: 0.05
    }, {
        category: "Lenny",
        measure: 0.18
    }, {
        category: "Paul",
        measure: 0.04
    }, {
        category: "Steve",
        measure: 0.03
    }];

    var width = 400,
        height = 400,
        outerRadius = Math.min(width, height) / 2,
        innerRadius = outerRadius * .999,
        // for animation
        innerRadiusFinal = outerRadius * .5,
        innerRadiusFinal3 = outerRadius * .45,
        color = d3.scale.category20() //builtin range of colors
    ;

    var vis = d3.select("#pieChart")
        .append("svg:svg") //create the SVG element inside the <body>
        .data([dataset]) //associate our data with the document
        .attr("width", width) //set the width and height of our visualization (these will be attributes of the <svg> tag
        .attr("height", height)
        .append("svg:g") //make a group to hold our pie chart
        .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")") //move the center of the pie chart from 0, 0 to radius, radius
    ;

试试:

d3.csv("file.csv", function(rows)
    {
        //rows is an array of json objects containing the data in from the csv
        dataset = rows.map(function(d)
        {
            //each d is one line of the csv file represented as a json object                
            return {"category": d.category, "measure": +d.measure} ;
        })
       dsPieChart();
    })

从这里得到提示

相关文章：