Почему события из d3 в firefox не обрабатываются

Question

Пожалуйста, посмотрите на http://bl.ocks.org/HoffmannP/95392bf4a37344793786 и помогите мне найти объяснение, почему он просто не работает в FF, но работает как шарм в Chrome.

Answer 1

потому что вы используете .style для ширины, высоты и x, когда вам нужно использовать .attr.

Наличие этих как .styles является частью SVG 2, а не SVG 1.1 и SVG 2 не завершено. Firefox еще не реализует эту часть SVG 2, хотя он реализует другие компоненты, которые Chrome не делает.

var margin = {top: 50, right: 20, bottom: 60, left: 70}; 
 
var width = 800 - margin.left - margin.right; 
 
var height = 500 - margin.top - margin.bottom; 
 

 
var x = d3.scale.linear() 
 
    .domain([0, 4]) 
 
    .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
    .domain([0, 60]) 
 
    .range([height, 0]); 
 

 
var yVal = d3.scale.linear() 
 
    .domain([60, 0]) 
 
    .range([height, 0]); 
 

 
var yAxisMinor = d3.svg.axis() 
 
    .scale(y) 
 
    .ticks(13) 
 
    .tickSize(width, 0) 
 
    .orient('right'); 
 

 
var yAxisMajor = d3.svg.axis() 
 
    .scale(y) 
 
    .ticks(7) 
 
    .tickSize(width, 0) 
 
    .tickPadding(-(width + 5)) 
 
    .tickFormat(d3.format('d')) 
 
    .orient('right'); 
 

 
var svg = d3.select('body').append('svg') 
 
    .attr('width', width + margin.left + margin.right) 
 
    .attr('height', height + margin.top + margin.bottom) 
 
    .append('g') 
 
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 
 

 
var xLabel = svg.append('g') 
 
    .attr('class', 'x label') 
 
    .attr('transform', 'translate(0, ' + height/2 + ') rotate(-90)') 
 
    .append('text') 
 
    .attr('text-anchor', 'middle') 
 
    .attr('dy', '-40') 
 
    .text('Prozent'); 
 

 
var gx = svg 
 
    .append('g').attr('class', 'x axis'); 
 

 
gx.append('g') 
 
    .attr('transform', 'translate(7, -15)') 
 
    .append('line') 
 
    .attr('x2', '0') 
 
    .attr('y2', height + 15); 
 

 
gx.append('g') 
 
    .attr('transform', 'translate(0, -26) scale(0.15, 0.15)') 
 
    .append('path') 
 
    .attr('d', 'M0,86.6L50,0L100,86.6C50,75 50,75 0,86.6z'); 
 

 
var gyMinor = svg.append('g') 
 
    .attr('class', 'y axis minor') 
 
    .call(yAxisMinor); 
 

 
gyMinor.selectAll('text').remove(); 
 

 
var gyMajor = svg.append('g') 
 
    .attr('class', 'y axis major') 
 
    .call(yAxisMajor); 
 

 
gyMajor.selectAll('text') 
 
    .style('text-anchor', 'end') 
 
    .attr('dy', '7px'); 
 

 
var drawArea = svg.append('g') 
 
    .attr('class', 'block') 
 
    .attr('transform', 'translate(' + 20 + ', ' + height + ') scale(1, -1)'); 
 

 
var backBlocks = drawArea 
 
    .selectAll('rect.back') 
 
     .data([64, 64, 64, 64]) 
 
    .enter() 
 
     .append('rect') 
 
     .attr('class', 'back') 
 
     .attr('width', width/5) 
 
     .attr('height', yVal) 
 
     .attr('x', function (d, i) { return x(i); }); 
 

 
var frontBlocks = drawArea 
 
    .selectAll('rect.front') 
 
     .data([0,0,0,0]) 
 
    .enter() 
 
     .append('rect') 
 
     .attr('class', 'front') 
 
     .attr('width', width/5) 
 
     .attr('height', yVal) 
 
     .attr('x', function (d, i) { return x(i); }); 
 

 
var newHeight = function (d, i) { 
 
    var y = d3.event.clientY; 
 
    d3.select(frontBlocks[0][i % 4]).style('height', height + margin.bottom - y); 
 
}; 
 

 
var currentActiveBlock = false; 
 

 
drawArea.selectAll('rect') 
 
    .on('mouseover', function (d, i) { 
 
     d3.select(backBlocks[0][i % 4]).style('opacity', '0.5'); 
 
    }) 
 
    .on('mouseout', function() { 
 
     backBlocks.style('opacity', '0'); 
 
    }) 
 
    .on('mousedown', function (d, i) { 
 
     d3.select(backBlocks[0][i % 4]).style('opacity', '0.5'); 
 
     newHeight.call(this, d, i); 
 
     currentActiveBlock = i % 4; 
 
    }) 
 
    .on('mousemove', function (d, i) { 
 
     if (currentActiveBlock === false) { 
 
      return; 
 
     } 
 
     newHeight.call(this, d, currentActiveBlock); 
 
    }) 
 
    .on('mouseup', function (d, i) { 
 
     d3.select(frontBlocks[0][currentActiveBlock]).style('opacity', '1'); 
 
     newHeight.call(this, d, currentActiveBlock); 
 
     currentActiveBlock = false; 
 
    });

body { 
 
    font: 18px sans-serif; 
 
} 
 

 
svg { 
 

 
} 
 

 
.label text { 
 
    font-weight: bold; 
 
} 
 

 
.y.axis path { 
 
    display: none; 
 
} 
 

 
.x.axis path { 
 
    fill: #333; 
 
} 
 

 
.axis line { 
 
    shape-rendering: crispEdges; 
 
    stroke: #333; 
 
    stroke-width: 2px; 
 
} 
 

 
.axis.minor line { 
 
    stroke-width: 1px; 
 
} 
 

 
.axis text { 
 
    text-anchor: end; 
 
} 
 

 
.block rect { 
 
    cursor: ns-resize; 
 
} 
 

 
.block rect.back { 
 
    opacity: 0.0; 
 
    fill: #ddd; 
 
} 
 
} 
 

 
.block rect.front { 
 
    fill: #222; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>