Question

我想将svg条形图放入某个div中，如果我设置属性＆＃34; width＆＃34;则无法获得计算出的svg宽度。百分比。我想坚持给出一个百分比的大小，以便能够从svg大小计算条宽等。

图表的div：

<div id="chart"></div>

附加SVG的代码，放在之前的函数中。调用该函数将数据放入bootrap模式：

var prodChart = d3.select("#chart");
var w = "100%";
var h = "100%";

// remove existing svg in div
prodChart.select("svg").remove();

var chartSVG = prodChart.append("svg")
              .attr(":xmlns:svg", "http://www.w3.org/2000/svg")
              .attr("id","prodchartsvg")
              .style("width", w)
              .style("height", h)
              .attr("class", "thumbnail");

要获取计算出的大小（以像素为单位），我已尝试过：

$("#prodchartsvg").width();                                // not working, returns 100
$("#chart").width();                                       // not working, returns null
prodchartsvg.node().getBBox();                             // prodchartsvg.node is not a  function
d3.select("#prodchartsvg").style("width");                 // returns 100%
chartSVG.style("width");                                   // returns auto
d3.select("#prodchartsvg").node().getBoundingClientRect(); // returns 0 for all parameters
d3.select("#chart").node().getBoundingClientRect();        // returns 0 for all parameters

我意识到我尝试过的一些上述函数在这个上下文中是不合适的（DOM，object，...）。

您能否告诉我如何以像素而非百分比获取svg宽度？

感谢您的帮助！

Answer 1

正如@nrabinowitz评论的那样，您的问题很可能是由于您尝试检索其宽度时屏幕上看不到您的SVG这一事实。

测试用例

在下面的代码段中，我们将$("#prodchartsvg").width()返回的值与两个svgs进行比较，一个隐藏，一个显示。

var prodChart = d3.select("#chart");
var w = "100%";
var h = "100%";

// remove existing svg in div
prodChart.select("svg").remove();

var hiddenSVG = prodChart.append("svg")
              .attr(":xmlns:svg", "http://www.w3.org/2000/svg")
              .attr("id","hiddenSVG")
              .style('display', 'none') // not shown on screen
              .style("width", w)
              .style("height", h)
              .attr("class", "thumbnail");

$('#result').html('hiddenSVG width is ' + $("#hiddenSVG").width())


var shownSVG = prodChart.append("svg")
              .attr(":xmlns:svg", "http://www.w3.org/2000/svg")
              .attr("id","shownSVG")
              .style("width", w)
              .style("height", h)
              .attr("class", "thumbnail");

$('#result').append('<br>shownSVG width is ' + $("#shownSVG").width())

svg {background-color: #eee}

<div id='chart'></div>
<div id='result'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

如何修复

尝试以下解决方案之一：

确保计算宽度时图表显示在屏幕上
确保在计算宽度时加载DOM。要么在html body的末尾移动脚本，要么将代码包装在jQuery DOM就绪函数中......

在以宽度为百分比创建后，获取d3.js SVG元素的像素宽度

1 个答案:

测试用例

如何修复