条形图中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

回答

相关问题