gpt4 book ai didi

javascript - d3 js 条形图在 mozilla firefox 中不起作用

转载 作者:行者123 更新时间:2023-12-03 02:55:30 25 4
gpt4 key购买 nike

我引用下面的jsfiddle实现了一个d3 js条形图链接。它与 chrome 一起工作正常。在 Firefox 网络浏览器中,标签是隐藏的。

<body>   <h1>D3.js Bar Chart Demo</h1>   <p>
Click on the bar to delete it. </p> <div>
<button onclick="changeData()">New</button>
<button onclick="appendData()">Append</button>
<button onclick="sortData()">Sort</button> </div> <svg id="chart"></svg> <p>
Click on the bar to delete it. </p> <div>
<button onclick="changeData()">New</button>
<button onclick="appendData()">Append</button>
<button onclick="sortData()">Sort</button> </div> <div class="trans-fore">
<div id="tooltip"></div> </div> </body>

最佳答案

问题出在 clipPath 元素上。 Chrome 对元素声明相当宽松,但 Firefox 则不然。要让你的 fiddle 正常工作,请更改:

svg.append('clippath')
.attr('id', 'chart-area')
.append('rect')
.attr({
x: Chart.margin.left + Chart.sideWidth,
y: Chart.margin.top,
width: BarArea.width,
height: BarArea.height,
});

致:

svg.append('defs').append('clipPath')
.attr('id', 'chart-area')
.append('rect')
.attr({
x: Chart.margin.left + Chart.sideWidth,
y: Chart.margin.top,
width: BarArea.width,
height: BarArea.height,
});

这是工作 fiddle .

关于javascript - d3 js 条形图在 mozilla firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47646865/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com