Question

将chrome更新到最新版本57.0.2987.133后，我的图表突然被破坏了。

原因是.style("height")总是返回0px。

d3.select('#bntextrefmeteo').style("height")

这给出了正确的结果：

d3.select('#bntextrefmeteo').style("width")

使用的D3版本是：＆＃34; d3＆＃34;：＆＃34; 4.7.3＆＃34;。

请查看此Codepen或以下Stack Snippet以获取有效的演示：

＆＃13;

var svg = d3.select("#svgContainer").append("svg")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("width", "500")
    .attr("height", "100")
    .classed("svg-content-responsive", true);
var bncharts = svg.append("g").classed("bnchartsmeteo", true);

bncharts.append("text").text("Bn Chart Reference").attr("id", "bntextrefmeteo").attr("class", "ref-text")
    .attr("transform", "translate(0, 20)");

var textHeight = bncharts.select("#bntextrefmeteo").style("height");
var textWidth = bncharts.select("#bntextrefmeteo").style("width");

var message = "Height:" + textHeight + ", Width:" + textWidth;

d3.select("#outputDiv").text(message);

＆＃13;

.ref-text{
  font-size:18px
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

<b>SVG</b>
<div id="svgContainer">
  
</div>

<b>OUTPUT:</b>
<div id="outputDiv"></div>

＆＃13;

最新稳定版Chrome中的上述片段，即57.0.2987.133显示高度为0px，但如果您在任何不同的浏览器上尝试使用Safari，那么它将提供正确的值。

更新

这是有效的：

d3.select('#bntextrefmeteo').node().getBoundingClientRect().height

Chrome 57.0.2987.133（64位）打破了d3图表

0 个答案: