为什么firefox中的d3事件没有得到处理

Question

请查看http://bl.ocks.org/HoffmannP/95392bf4a37344793786并帮助我找到一个解释，为什么它在FF中不起作用，但在Chrome中就像魅力一样。

Answer 1

因为当您需要使用.attr时，您可以使用.style作为宽度，高度和x。

将这些作为.styles是SVG 2的一部分而不是SVG 1.1和SVG 2未完成。 Firefox尚未实现SVG 2的这一部分，尽管它确实实现了Chrome不支持的其他部分。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;