條形圖中D3.js與AngularJS

我在D3條形圖錯誤，當在該網頁上負載
錯誤：
錯誤：< RECT值無效>屬性Y =「南」，錯誤：爲<矩形>屬性高度=「南」
值無效我試圖通過編輯來解決此代碼
毫無效果條形圖中D3.js與AngularJS

var countriesData = data.countries; 

    var datac=[]; 
    for (var key in countriesData) { 
     datac.push({key: key, value: countriesData[key]}); 
    }; 
    console.log(datac); 
    var width = 250; 
    var height = 250; 
//console.log(data4); 
    //x and y Scales 
    var xScale = d3.scale.ordinal() 
     .rangeRoundBands([0, width], .1); 

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

    xScale.domain(datac.map(function(d) { return d.x; })); 
    yScale.domain([0, d3.max(datac, function(d) { return d.y; })]); 

    //x and y Axes 
    var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom"); 
     //.ticks(); 
    var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient("left"); 
     //.ticks(function(d) { return d.x; }); 

    //create svg container 
    var svg = d3.select("#barchart").select("svg").remove(); 


    svg = d3.select("#barchart") 
     .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     //.transition().duration(2000) 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");   


    //create bars 
    svg.selectAll(".bar") 
     .data(datac) 
     .enter() 
     .append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return xScale(d.x); }) 
     .attr("width", xScale.rangeBand()) 
     .attr("y", function(d) { return yScale(d.y); }) 
     .attr("height", function(d) { return height - yScale(d.y); }); 

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

    //drawing the y axis on svg 
    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("Reviews Number");

請幫幫忙！

來源

2016-01-06 Ibrahim Samara

很難說，但我猜XScale處理器的它的定義：

xScale.domain(datac.map(function(d) { return d.x; }));

大概應該是這樣的：

xScale.domain(d3.extent(datac, fucntion (d) {return d.x}))

來源

2016-01-06 17:29:43 reptilicus

這是行不通的，順便說一句有關錯誤（Y和高度），錯誤：屬性y =「NaN」的值無效，錯誤：屬性height =「NaN」的值無效。不是（x）。 –

你可以發佈'datac'看起來像什麼嗎？ – reptilicus

謝謝你的男人問題出在datac ，現在解決了:) –

條形圖中D3.js與AngularJS

回答

相關問題