d3.v3.min.js：2 Uncaught TypeError：未定義のプロパティ 'length'を読み取ることができません

-1

私は間違いがあり、あなたのお手伝いをしていただきありがとうございます。d3.v3.min.js：2 Uncaught TypeError：未定義のプロパティ 'length'を読み取ることができません

私のデータがconsumer_complaints.csvと呼ばれている：

date_received,product,sub_product,issue,sub_issue,consumer_complaint_narrative,company_public_response,company,state,zipcode,tags,consumer_consent_provided,submitted_via,date_sent_to_company,company_response_to_consumer,timely_response, consumer_disputed,complaint_id 
08/30/2013,Mortgage,Other mortgage,Loan modification,collection,foreclosure,U.S. Bancorp,CA,95993,Referral,09/03/2013,Closed with explanation,Yes,Yes,511074

マイコード：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.bar { 
    fill: steelblue; 
} 

.x.axis path { 
    display: none; 
} 

</style> 
<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script> 

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x0 = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .1); 

var x1 = d3.scale.ordinal(); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var color = d3.scale.ordinal() 
    .range(["#ff0000", "#00ff00"]); 

var xAxis = d3.svg.axis() 
    .scale(x0) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(d3.format(".2s")); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("consumer_complaints.csv", function(error, data) { 
    if (error) throw error; 

var nested_data = d3.nest() 
.key(function(d) { return d.submitted_via; }) 
.entries(data); 

var subVia = []; 
nested_data.forEach(function(d,i){ 
    var count = 0; 
    subVia[i] = d.key; 
    d.values.forEach(function(v){ 
     if(v.consumer_disputed == "Yes") 
     count++ 
    }); 
    d.dispu = [{name: "Yes",value: count/d.values.length},{name: "No",value: 
    (d.values.length-count)/d.values.length}]; 
}); 

    x0.domain(subVia.forEach(function(d,i){ return subVia[i]; })); 
    x1.domain(subVia).rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, d3.max(nested_data, function(d) { return d3.max(d.dispu, function(d) { return d.value; }); })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Satisfaction"); 

    var state = svg.selectAll(".state") 
     .data(data) 
    .enter().append("g") 
     .attr("class", "state") 
     .attr("transform", subVia.forEach(
     function(d,i) {console.log(subVia[i]); return "translate(" + x0(subVia[i]) + ",0)"; })); 

    state.selectAll("rect") 
     .data(function(d) { return d.dispu; }) 
    .enter().append("rect") 
     .attr("width", x1.rangeBand()) 
     .attr("x", function(d) { return x1(d.key); }) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }) 
     .style("fill", function(d) { return color(d.key); }); 

    var legend = svg.selectAll(".legend") 
     .data(subVia.slice().reverse()) 
    .enter().append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

    legend.append("rect") 
     .attr("x", width - 18) 
     .attr("width", 18) 
     .attr("height", 18) 
     .style("fill", color); 

    legend.append("text") 
     .attr("x", width - 24) 
     .attr("y", 9) 
     .attr("dy", ".35em") 
     .style("text-anchor", "end") 
     .text(function(d) { return d; }); 

}); 

</script>

出典

2016-08-11 user6706351

-1

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 

 
body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.bar { 
 
    fill: steelblue; 
 
} 
 

 
.x.axis path { 
 
    display: none; 
 
} 
 

 
</style> 
 
<body> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 
<script> 
 

 
var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var x0 = d3.scale.ordinal() 
 
    .rangeRoundBands([0, width], .1); 
 

 
var x1 = d3.scale.ordinal(); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
var color = d3.scale.ordinal() 
 
    .range(["#ff0000", "#00ff00"]); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(x0) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(y) 
 
    .orient("left") 
 
    .tickFormat(d3.format(".2s")); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
d3.csv("consumer_complaints.csv", function(error, data) { 
 
    if (error) throw error; 
 

 
var nested_data = d3.nest() 
 
.key(function(d) { return d.submitted_via; }) 
 
.entries(data); 
 

 
var subVia = []; 
 
nested_data.forEach(function(d,i){ 
 
    var count = 0; 
 
    subVia[i] = d.key; 
 
    d.values.forEach(function(v){ 
 
     if(v.consumer_disputed == "Yes") 
 
     count++ 
 
    }); 
 
    d.dispu = [{name: "Yes",value: count/d.values.length},{name: "No",value: 
 
    (d.values.length-count)/d.values.length}]; 
 
}); 
 

 
    x0.domain(subVia.forEach(function(d,i){ return subVia[i]; })); 
 
    x1.domain(subVia).rangeRoundBands([0, x0.rangeBand()]); 
 
    y.domain([0, d3.max(nested_data, function(d) { return d3.max(d.dispu, function(d) { return d.value; }); })]); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis); 
 

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis) 
 
    .append("text") 
 
     .attr("transform", "rotate(-90)") 
 
     .attr("y", 6) 
 
     .attr("dy", ".71em") 
 
     .style("text-anchor", "end") 
 
     .text("Satisfaction"); 
 

 
    var state = svg.selectAll(".state") 
 
     .data(data) 
 
    .enter().append("g") 
 
     .attr("class", "state") 
 
     .attr("transform", subVia.forEach(
 
     function(d,i) {console.log(subVia[i]); return "translate(" + x0(subVia[i]) + ",0)"; })); 
 

 
    state.selectAll("rect") 
 
     .data(function(d) { return d.dispu; }) 
 
    .enter().append("rect") 
 
     .attr("width", x1.rangeBand()) 
 
     .attr("x", function(d) { return x1(d.key); }) 
 
     .attr("y", function(d) { return y(d.value); }) 
 
     .attr("height", function(d) { return height - y(d.value); }) 
 
     .style("fill", function(d) { return color(d.key); }); 
 

 
    var legend = svg.selectAll(".legend") 
 
     .data(subVia.slice().reverse()) 
 
    .enter().append("g") 
 
     .attr("class", "legend") 
 
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 
 

 
    legend.append("rect") 
 
     .attr("x", width - 18) 
 
     .attr("width", 18) 
 
     .attr("height", 18) 
 
     .style("fill", color); 
 

 
    legend.append("text") 
 
     .attr("x", width - 24) 
 
     .attr("y", 9) 
 
     .attr("dy", ".35em") 
 
     .style("text-anchor", "end") 
 
     .text(function(d) { return d; }); 
 

 
}); 
 

 
</script>

出典

2016-08-11 18:27:37

あなたの答えに説明を追加してください。 –

d3.v3.min.js：2 Uncaught TypeError：未定義のプロパティ 'length'を読み取ることができません

答えて

関連する問題