在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中结合堆积面积图和刷牙

回答

相关问题