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

Question

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

图表的 div:

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

附加 SVG 的代码，放在它之前的一个函数中。调用该函数以将数据放入引导模式:

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、对象...)。

你能告诉我如何获取以像素而不是百分比为单位的 svg 宽度吗？

谢谢你的帮助!

Answer 1

正如@nrabinowitz 评论的那样，您的问题很可能是由于当您尝试检索其宽度时您的 SVG 在屏幕上不可见。

测试用例

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

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>

如何修复

尝试以下解决方案之一:

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