Question

我尝试将小d3.js动画与单独的图像组合在一起，但无法跨浏览器工作。我的代码在Chrome和Safari中正常运行但在Firefox中无法正常运行，或在Internet Explorer中正常运行。在FF中他们不是内联的。对于IE我跟着this tip - 他们确实渲染内联，但差距很大。

非常感谢。这是jsfiddle of the model。由于它是一个CSS问题，我认为只有前2个javascript链可能是相关的 - 其余的是动画。

<!DOCTYPE html>
<html>
<head>
  <title>In-line problem</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
    .img {-webkit-backface-visibility: hidden;}
    #container .logoElement{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 400;
    }
  </style>
</head>
<body>
  <span id="container">
    <div id="d3div" class="logoElement"></div>
    <div id="imagediv" class="logoElement"></div>
  </span>

  <script>
  // right-side (static) image element
  d3.select("#imagediv").append("img")
        .attr("src", "https://cdn.tutsplus.com/mobile/uploads/legacy/Free-App-Marketing-Tips/city-landscape.png")
        .style("max-width", "200px")
        .attr("class", "logoElement");

  // left-side  (dynamic) d3 element
  var g = d3.select("#d3div").append("svg")
      .attr("class", "logoElement")
      .style("height", 110)
      .style("width", 180)
      .append("g")
        .attr("transform", "scale(1.1)");

  // I THINK BELOW CAN BE IGNORED

    var start = Date.now(),
    speed = .02;

  // initialise dynamic animation elements
  var big = g.append("image")
    .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
    .attr("class", "img")
    .attr("width", 100).attr("height", 100)
    .attr("x", -50).attr("y", -50);

  var small = g.append("image")
    .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
    .attr("class", "img")
    .attr("width", 50).attr("height", 50)
    .attr("x", -25).attr("y", -25);

  // animate
  d3.timer(function() {
    var angle = (Date.now() - start) * speed,
        transform = function(d) { return "translate(50,50)," + "rotate(" + angle/2 + ")"; };
    big.selectAll("frame").attr("transform", transform);
    big.attr("transform", transform);
  });

  d3.timer(function() {
    var angle = (Date.now() - start) * speed,
        transform = function(d) { return "translate(124,50)," + "rotate(" + -angle + ")"; };
    small.selectAll("frame").attr("transform", transform);
    small.attr("transform", transform);
  });
  </script>
</body>
</html>

Answer 1

您忘记了.logoElement的宽度声明中的单位。

同时为容器设置white-space: nowrap;，以确保始终将元素并排排列而不使用换行符

示例小提琴：http://jsfiddle.net/xm3fLyxz/6/

Answer 2

<强> Demo

#container .logoElement{
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 200px; /* You forgot to add 'px', to show it in one line I reduced the width */
}

d3.js内联块元素在Firefox和IE中失败

2 个答案: