位置按鈕的

Sorry.My迷惑來自於我的粗心，我忘記了CSS代碼設置樣式在頁面上的所有按鈕，所以每一個按鈕將顯示在右上角，我認爲一個意外位置。:(位置按鈕的

我想把擺動按鈕放在svg下面，而我只是把它放在svg中並覆蓋更新按鈕，我無法弄清楚，幫助我，請諒解。承認事先:(，代碼說到：

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

如果妳可以pleaz也告訴我如何應用佈局扭動沒有點擊更新按鈕，現在的情況是我點擊扭動按鈕，然後我必須ç點擊更新按鈕查看圖表更新其圖表。

來源

2014-03-19 Alfred Chen

我不是你想要完全清楚，但這裏是經過一些調整一個FIDDLE。首先，我添加了圖表div來幫助定位擺動按鈕。

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

但也有其他的一些調整，如消除其導致錯誤的addElem（）塊，呼籲從擺動按鈕代碼等不管怎麼說過渡，讓我們看看這會有所幫助。

來源

2014-03-19 10:55:49 FernOfTheAndes

對不起，我忘記了CSS將頁面中的所有按鈕修復到右上角，併爲我的糟糕表情（對不起，但我認爲你只是在我的問題下） –

@AlfredChen對不起，我是您的評論不是很清楚，這是任何幫助嗎？ – FernOfTheAndes

您的代碼回答我的問題correctly.I意味着我堅持我以前的代碼只是因爲我真的不小心，我浪費你的時間:( –

回答

相關問題