Question

我正在尝试将折线图放入div中。我很难适应整个图表，包括x和y轴到div中。 x轴总是最终隐藏在div的底部范围之外。我希望图表（包括轴）可见并自动缩放并适合容器div，即使div的尺寸发生变化。换句话说，我希望它的行为就像Microsoft Excel中的图表一样。

这是JavaScript。我认为我从根本上误解了viewBox属性

//get width and height of container div    
var div_w = d3.select("#container").style("width").split("px").shift();
var div_h = d3.select("#container").style("height").split("px").shift();

// Add an SVG element with the desired dimensions and margin.
var graph = d3.select("#container”)
    .append("svg:svg")
    .attr("viewBox","0 0 " + div_w +" " + div_h)
    .attr("preserveAspectRatio", "xMinYMin meet")
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

//Here is the resulting html
<div  class=”container”>
    <svg>
        <g>
            <g class=”x axis”>
                <g class=”tick”
                    <line  attributes…..
                    <text attributes…..
                </g>
        </g>
    </svg>
</div>

我在寻找错误的解决方案。稍后在代码中，当x轴被附加到div容器时，我通过使用transform属性将轴向下移动h单位（h是div容器的高度），因此轴将最终低于底部容器的范围。只需将它向下移动h-m [1]单位（高度 - 底部边距）。这至少会解决x轴可见性问题。没有用div问题解决重新调整大小的问题。

    //WRONG WAY    
    // Add the x-axis.
        graph.append("svg:g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + h + ")")
              .call(xAxis);

    //RIGHT WAY
    // Add the x-axis.
        graph.append("svg:g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + (h-m[1]) + ")")
              .call(xAxis);

Answer 1

#container之后的前两行中的第二个括号很奇怪。

尝试粘贴它，看看它是否有效：

var div_w = d3.select("#container").style("width").split("px").shift();
var div_h = d3.select("#container").style("height").split("px").shift();

在div内部安装svg并在div的大小改变时自动缩放svg

1 个答案: