Question

我已经实现了一个参考以下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>

Answer 1

问题在于clipPath元素。 Chrome对元素声明非常宽容，但不支持Firefox。为了让你的小提琴工作，改变：

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。

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

1 个答案: