d3.js v4错误：rect负值

Question

大家好，我是代码初学者。 我试图添加一些图表（d3.js v4）作为Flask小应用程序的输出。我做了一个小爬虫来抓取信息，然后我想展示十个顶页和这些的wordcloud。我首先制作了一个简单的条形图并且它工作了，我添加了一个调整大小的功能，它似乎有效但过了一段时间它停止了，我无法弄清楚我改变了什么。 wordcloud正在工作，但当我尝试检查页面时，控制台给了我同样的条形图错误。 错误是： 错误：d3.v4.min.js：2属性宽度：负值无效。 （＆＃34; -150＆＃34）。 代码嵌套在ajax成功输出中。 代码如下：

<script>
$(function () {
        $('#btnSignUp').click(function Rec() {
            $.ajax({
                url: '/signUp',
                data: $('form').serialize(),
        type: 'POST',
        success : function(respose) {                                         
                                    var data = respose[0]['chart']; 
                                    var words = respose[1]['words'];
                                    console.log(data); 
                                    console.log(words); 

                                    total = data.reduce(function (sum, d) {return sum + d.value;}, 0)
                                    groups=Object.keys( data ).length;
                                    console.log(total);
                                    console.log(groups);                            
                                    var chartDiv = document.getElementById("chart1");
                                    var svg = d3.select(chartDiv).append("svg");

                                    function redraw(){
                                    d3.selectAll('svg > g > *').remove();
                                    var width = chartDiv.clientWidth;
                                    var height = chartDiv.clientHeight;

                                    svg
                                      .attr("width", width)
                                      .attr("height", 400);

                                    var margin = {top: 0, right: 50, bottom: 0, left: 100},
                                           width = +svg.attr("width") - margin.left - margin.right,
                                           height = +svg.attr("height") - margin.top - margin.bottom;

                                    var tooltip = d3.select("body").append("div").attr("class", "toolTip");

                                    var x = d3.scaleLinear().range([0, width]);
                                    var y = d3.scaleBand().range([height, 0]);

                                    var g = svg.append("g")
                                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                                     data.sort(function(a, b) { return a.value - b.value; });

                                    x.domain([0, d3.max(data, function(d) { return d.value; })]);
                                    y.domain(data.map(function(d) { return d.area; })).padding(0.1);

                                    g.append("g")
                                        .attr("class", "x axis")
                                        .attr("transform", "translate(0," + height + ")")
                                        .call(d3.axisBottom(x).ticks(5).tickFormat(function(d) { return parseInt(d); }).tickSizeInner([-height]));

                                    g.append("g")
                                        .attr("class", "y axis")
                                        .call(d3.axisLeft(y));

                                    g.selectAll(".bar")
                                        .data(data)
                                      .enter().append("rect")
                                        .attr("class", "bar")
                                        .attr("x", 0)
                                        .attr("height", y.bandwidth())
                                        .attr("y", function(d) { return y(d.area); })
                                        .attr("width", function(d) { return x(d.value); })
                                        .on("mousemove", function(d){

                                            tooltip
                                              .style("left", d3.event.pageX - 50 + "px")
                                              .style("top", d3.event.pageY - 90 + "px")
                                              .style("display", "inline-block")
                                              .html((d.area) + "<br><span>" + (d.value) + " post " + "</span>");
                                        })
                                            .on("mouseout", function(d){ tooltip.style("display", "none");});
                                    }
                                    redraw();

                                    window.addEventListener("resize", redraw);

                                     //inizio cloud
                                     function getRandomInt(min, max) {return (Math.floor(Math.random() * (max-min)) + min);};

                                    var fill = d3.scaleOrdinal(d3.schemeCategory20c);

                                    d3.layout.cloud()
                                           .size([450, 300]).words(words)
                                           .rotate(function() { return ~~(Math.random() * 2) * 90; })
                                           .font("Impact")
                                           .fontSize(function(d) { return d.count*100; })
                                           .on("end", draw)
                                           .start();

                                    function draw(words) {
                                      console.log(words);
                                      d3.select("#cloud").append("svg")
                                        .attr("width", 500)
                                        .attr("height", 350)
                                        .append("g")
                                        .attr("transform", "translate(150,150)")
                                        .selectAll("text")
                                        .data(words)
                                        .enter().append("text")
                                        .style("font-size", function(d) {
                                          return d.count *100 + "px";
                                        })
                                        .style("font-family", "Impact")
                                        .style("fill", function () { return fill(getRandomInt(0, 5)); })
                                        .attr("text-anchor", "start")
                                        .attr("transform", function(d) {
                                          return "translate(" + [Math.abs(d.x), d.y] + ")rotate(" + d.rotate + ")";
                                        })
                                        .text(function(d) {
                                          return d.word;
                                        }); };

                                    //fine del success

                                    } });
        });    });                    
</script>