Question

抱歉，我忘记了css代码为页面中的所有按钮设置了一个样式，所以每个按钮都会显示在右上角，我认为是一个意外的位置。：（< / p>

我想把wiggle按钮放在svg下面，而我只是在svg中得到它并覆盖更新按钮，我无法弄清楚，帮助我，pleaz.Sorry为我的网络提前确认:( ，代码来了：

<!DOCTYPE html>
<meta charset="utf-8">
<title>Streamgraph</title>
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

button {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<button onclick="transition()">Update</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var n = 20, // number of layers
    m = 200, // number of samples per layer
    zero_stack = d3.layout.stack().offset("zero"),
    wig_stack = d3.layout.stack().offset("wiggle"),
    exp_stack = d3.layout.stack().offset("expand"),
    sil_stack = d3.layout.stack().offset("silhouette"),
    layers0 = zero_stack(d3.range(n).map(function() { return bumpLayer(m); })),
    layers1 = zero_stack(d3.range(n).map(function() { return bumpLayer(m); }));

var width = 960,
    height = 500;

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

var y = d3.scale.linear()
    .domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
    .range([height, 0]);

var color = d3.scale.linear()
    .range(["#aad", "#556"]);

var area = d3.svg.area()
    .x(function(d) { return x(d.x); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("wmode","Transparent")
    .attr("height", height);
addElem(svg,"rect").attr({
            "width" : width,
            "pointer-events" : "all",
            "float" : "left",
            "height" : height
        })
        .style("visibility","hidden");

svg.selectAll("path")
    .data(layers0)
  .enter().append("path")
    .attr("d", area)
    .style("fill", function() { return color(Math.random()); });


d3.select("body")append("button").text("wiggle").attr("float","left").on("click",changewiggle);


function transition() {
  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })
    .transition()
      .duration(2500)
      .attr("d", area);
}

// Inspired by Lee Byron's test data generator.
function bumpLayer(n) {

  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = 0;
  for (i = 0; i < 5; ++i) bump(a);
  return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}

function changewiggle(){
    log("wig");
    layers0 = wig_stack(d3.range(n).map(function() { return bumpLayer(m); })),
    layers1 = wig_stack(d3.range(n).map(function() { return bumpLayer(m); }));

}

</script>

如果可以的话，请告诉我如何在不点击更新按钮的情况下应用布局来摆动，现在的情况是我点击了摆动按钮，然后我必须点击更新按钮才能看到图表更新其图表。

Answer 1

我对你想要的一切并不完全清楚，但经过一些调整后，这里是FIDDLE。首先，我添加了图表div以帮助定位摆动按钮。

d3.select("#chart")
    .append("button")
    .text("wiggle")
    .attr("float", "left")
    .on("click", changewiggle);

但还有其他一些调整，例如删除导致错误的addElem（）部分，从wiggle按钮代码调用转换等。无论如何，让我们看看这是否有帮助。

按钮在svg中的位置

1 个答案: