在D3中結合堆積面積圖和刷牙

我很努力在D3中堆積面積圖並添加brushing功能。我已經設法生成了大的（焦點）和小的（上下文）軸，並且繪圖看起來很好開始。我的問題是刷牙功能根本不起作用。我一直對此抱有一段時間，但無濟於事，不知道問題出在哪裏。任何幫助將非常感激！在D3中結合堆積面積圖和刷牙

單擊here可以查看該圖的當前狀態。下面的代碼：

<!-- language: lang-js --> 
<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.tag text { 
    text-anchor: end; 
} 

</style> 
<body onLoad="updateData()"> 
     <div id="option" style="font-size:14px;"> 
     <form> 
     Number of tags:<input value="5" id="nTags_select"></input> 
     <input name="updateButton" 
           type="button" 
           value="Update" 
           onclick="updateData()" /> 
         </form> 
</div> 
<script src="http://d3js.org/d3.v3.js"></script> 
<script> 

var margin = {top: 10, right: 10, bottom: 100, left: 40}, 
    margin2 = {top: 430, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom, 
    height2 = 500 - margin2.top - margin2.bottom; 


var parseDate = d3.time.format("%Y-%m-%d").parse; 

var x = d3.time.scale().range([0, width]), 
    x2 = d3.time.scale().range([0, width]), 
    y = d3.scale.linear().range([height, 0]), 
    y2 = d3.scale.linear().range([height2, 0]); 

var color = d3.scale.category20(); 

var xAxis = d3.svg.axis().scale(x).orient("bottom"), 
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"), 
    yAxis = d3.svg.axis().scale(y).orient("left"); 

var brush = d3.svg.brush() 
    .x(x2) 
    .on("brush", brushed); 

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

var area2 = d3.svg.area() 
    .interpolate("basis") 
    .x(function(d) { return x2(d.date); }) 
     .y0(function(d) { return y2(d.y0); }) 
     .y1(function(d) { return y2(d.y0 + d.y); }); 

var stack = d3.layout.stack() 
     .values(function(d) { return d.values; }); 



var oRequest = new XMLHttpRequest(); 
var sURL = "data100.tsv"; 
oRequest.open("GET",sURL,false); 
oRequest.setRequestHeader("User-Agent",navigator.userAgent); 
oRequest.send(null) 
var data = oRequest.responseText; 

var data = d3.tsv.parse(data); 

    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
    }); 

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 
    var allTags = stack(color.domain().map(function(name) { 
     return { 
      name: name, 
      values: data.map(function(d) { 
       return {date: d.date, y: +d[name]}; 
      }) 
     }; 
    })); 


    function updateData(){ 
     var nTags = document.getElementById('nTags_select').value; 
     tags=allTags.slice(0,nTags); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0,d3.max(tags, function(d) { return d3.max(d.values, function (d) { return d.y + d.y0; }); })]); 
    x2.domain(x.domain()); 
    y2.domain(y.domain()); 

    d3.select("svg").remove(); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 

    svg.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

var focus = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var context = svg.append("g") 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 

focus.selectAll('path') 
      .data(tags) 
      .enter() 
      .append('path') 
      .attr('clip-path','url(#clip)') 
      .attr("d", function(d) { return area(d.values); }) 
      .attr('class','focus') 
      .style("fill", function(d) { return color(d.name); }); 

    focus.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    focus.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 


context.selectAll('path') 
      .data(tags) 
      .enter() 
      .append('path') 
      .attr('class','context') 
      .attr("d", function(d) { return area2(d.values); }) 
      .style("fill", function(d) { return color(d.name); }); 


    context.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height2 + ")") 
     .call(xAxis2); 

    context.append("g") 
     .attr("class", "x brush") 
     .call(brush) 
    .selectAll("rect") 
     .attr("y", -6) 
     .attr("height", height2 + 7); 


    focus.append("text") 
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y/2) + ")"; }) 
      .attr("x", -6) 
      .attr("dy", "-.35em") 
      .text(function(d) { return d.name; }); 

}; 




function brushed() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.selectAll("path.focus").attr("d", area); 
    focus.select(".x.axis").call(xAxis); 
} 

</script>

來源

2013-04-08 moustachio

在Mike的原代碼，他選擇了名的焦點，他的SVG元素這是不幸的 - 它already exists in the dom，並且可能會造成混淆的問題。

無論如何，這裏的問題主要是範圍之一。

Mike將focus定義在獲取數據的範圍之外，從而將其放入全局範圍。因此，它可用於brushed()功能。

我會採取的第一步是將focus var的定義移到updateData（）函數的外部。

不過，也有一些其他的問題：

您應該使用d3.tsv與匿名函數來獲得數據。它會讓事情變得更簡單。

在拉絲功能中，您需要使用匿名函數並傳遞區域函數d.values，而不僅僅是d。你在updateData函數中做了這個，但沒有刷過。即：

function brushed() { 
    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focus.selectAll("path.focus").attr("d", function(d){return area(d.values)}); 
    focus.select(".x.axis").call(xAxis); 
}

我有圖表的一個粗略的版本與塗刷在這裏工作：http://jsfiddle.net/zQ2EF/但是，我想邁克的例子去了仔細注意的事情是定義在哪裏，以及他們在這範圍 - 它會幫助你理解問題所在！

來源

2013-04-09 01:40:52 minikomi

謝謝！這非常有幫助。我最初是在Mike的示例之後對代碼進行建模的，但是當嘗試添加更新功能時，這給我帶來了問題。我最終設置了原樣，所以我可以加載數據一次，然後選擇要使用表單元素進行繪圖的子集，清除繪圖並重繪。目前還不清楚如何用通常的「d3.tsv（」blah.tsv「，函數（error，data）{....};」格式來做到這一點。「你會把d3.tsv函數放在」updateData （）「功能？再次感謝。 – moustachio 2013-04-09 13:31:17

Nevermind！工作正常！ – moustachio 2013-04-09 14:49:14

@moustachio，你可以發佈工作版嗎？ – 2013-09-21 01:23:54

在D3中結合堆積面積圖和刷牙

回答

相關問題