从csv D3填充数据集失败

我很新D3，但我试图将一些bl.ock代码转换为我的要求。从csv D3填充数据集失败

我正在使用的示例有一个html文件内的静态数据字典 - 我试图切换这个使用csv数据。

我的CSV如下：

类，测量
山姆，0.3
彼得，0.25
约翰，0.15
里克，0.05
莱尼，0.18
保罗，0.04
史蒂夫，0.03

我试过的代码如下：

我只是没有使用正确d3.csv有一个范围问题，即填充数据集之外的 dsPieChart()意味着它是不可达，或 - 0

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 + ")") 
    ; 
    .. 
    ... 
    ....

的馅饼不使用以上时出现？

注

原代码是这样的：

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 
    ;

来源

2016-10-05 whytheq

是您的CSV实际上是在一个线？ – JNF

@JNF谢谢 - 格式化问题 - 我现在要修改 – whytheq

为什么你要'dataset = d3.csv（...'？我不认为'csv'返回一个数据集。 – JNF

试试这个方法：

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(); 
    })

接过线索，从here

来源

2016-10-05 14:06:35 JNF

好吧 - 这帮了很多 - 谢谢 – whytheq

从csv D3填充数据集失败

回答

相关问题