CODEWITHSUNDEEP
javascriptd3.jsbar-chart
akhil viswam
akhil viswam

Reputation: 516

d3 js bar chart not working in mozilla firefox

I have implemented a d3 js bar chart with reference to the following jsfiddle link.It working fine with chrome.In firefox web browser tags are hidden.

<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>

Upvotes: 0

Views: 760

Answers (1)

JulCh
JulCh

Reputation: 2878

The problem is about the clipPath element. Chrome is quite permissive about element declaration but not Firefox. To get your fiddle working, change:

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,
});

To:

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,
});

Here is the working fiddle.

Upvotes: 1

Related Questions