javascript - Bootstrap 和 D3 问题

Question

我使用带有 Bootstrap 的 D3 图表，但是我遇到了问题。当我调整窗口大小时，图表不会调整大小。我拍了一张截图，这样你就明白我的意思了。 我将容器编码为 col。一切都行不通。 我认识到如果我在调整窗口大小后刷新页面它就可以工作。 我希望得到一些建议或者可能是一种使 D3 图表响应式的新方法。 这是一幅画，你明白我的意思。 截图:http://prntscr.com/7vlemu

Answer 1

您希望图表具有响应能力，并且您已经做到了这一点:如果您在调整窗口大小后刷新页面，图表就会进行调整。这意味着您已经在使用比例，并且根据其容器元素的函数计算了 svg 的宽度和高度，该容器元素的宽度以 % 为单位。

真正拥有响应式感觉的下一步是在窗口调整大小事件中重新绘制图表。

如果我没记错的话，你会这样做:

d3.select(window).on("resize",myResizeFunction);

function myResizeFunction() {
  //If you have multiple svg's, please change the selector ;-)
  d3.select("svg").remove() //remove the old chart first

 //redraw the chart here.

}

编辑 好的，这是一个例子:

function createAdaptiveBarchart(){
//this code is actually in a separate file. It draws the initial barchart
//based on the width of its containing element, which is a div in my case 
// with the id = barchart
// The div has a css width expressed in percentage.

var barchartContainer = d3.select("#barchart");

        var chartWidth = parseInt(barchartContainer.style("width"),10);     
        var chartHeight = chartWidth * this.width_height_ratio; 
        var sideMargin = Math.round(chartWidth * this.marginfactor);
        var bottomMargin = Math.round(chartHeight * 0.3);
        var fontsize = (chartWidth/this.font_to_width_ratio) + "em";


        var svg = barchartContainer.append("svg")
                                .attr({
                                    width:chartWidth,
                                    height:chartHeight
                                });


        var xScale = d3.scale.ordinal()
                                .domain(mydata) 
                                .rangeRoundBands([sideMargin, chartWidth - sideMargin], .1);
        var yScale = d3.scale.linear()
                                .domain([1, d3.max(monthsarray, function(d){return d.amountMonths;})]) 
                                .range([chartHeight - bottomMargin, sideMargin]); 
        drawChart();

        function drawChart() {
            var bars = svg.selectAll("rect")
                                .data(monthsarray)
                                .enter()
                                .append("g")
                                    .attr("transform", function(d){return "translate(" + xScale(d.turnover) + ",2)";})
                                .append("rect")
                                    .attr({
                                            x:0, 
                                            y:function(d){return yScale(d.amountMonths);},
                                            width:xScale.rangeBand(),
                                            height:function(d){ return chartHeight - bottomMargin - yScale(d.amountMonths);},
                                            fill:"rgba(85, 214, 221, 0.1)",
                                            stroke:"#00ffff"
                                        });
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom");

            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left");

            svg.append("g")
                    .attr("transform",function(){return "translate(0," + (chartHeight - bottomMargin + 3) + ")"; })
                    .attr("class","axis")
                    .call(xAxis)
                    .selectAll("text")  
                        .style("text-anchor", "end") /*  all of this is to rotate the text a bit: first achor it, reposition, rotate */
                        .attr("dx", "-.8em")
                        .attr("dy", ".15em")
                        .attr("font-size", fontsize) // making the font-size in relation to the svg width;
                        .attr("transform", function(d) {
                            return "rotate(-65)" 
                            });

            svg.append("g")
                    .attr("transform","translate(" + sideMargin + ",3)")
                    .attr("class","axis")
                    .call(yAxis)
                    .selectAll("text")
                        .attr("font-size", fontsize);

};

/* THIS IS THEN THE CODE WHICH IS IN MY HTML FILE */

<script>

        createAdaptiveBarchart(); //the function I declared above

        d3.select(window).on("resize",resize); //capturing the resizing event

        function resize() {
            /* resetting the visualisation */
            d3.selectAll("svg").remove();           
            createAdaptiveBarchart();
        }


    </script>

基本上应该可以了。我建议尝试并理解这个例子。由于这是我的一个更大的可视化的一部分，因此如果您只是复制代码，其中可能有一些变量不会被定义。但基本上这个例子可以分解如下:

• 创建条形图的标准函数。确保宽度是 在函数中使用包含元素的宽度并使您的 图表高度是图表宽度的函数(这就是 width_height_ratio 变量确实如此)。
• 使用该函数创建条形图。
• 捕获窗口大小调整事件
• 在这种情况下，创建一个回调函数来删除您的图表或任何其他附加元素。
• 使用标准函数在回调中创建条形图。

如果还有更多问题，请提问。该示例应该很快就会上线，上线后我可以提供一个链接。