Fatal编程技术网
  • javascript/
  • Javascript 在D3中结合堆积面积图和刷涂

Javascript 在D3中结合堆积面积图和刷涂

javascript d3.js

Javascript 在D3中结合堆积面积图和刷涂,javascript,d3.js,brush,stacked-area-chart,Javascript,D3.js,Brush,Stacked Area Chart,我正在努力在D3中使用堆叠面积图并添加功能。我已经成功地生成了大（焦点）轴和小（上下文）轴，并且绘图开始看起来很好。我的问题是刷牙功能根本不起作用。我在这个问题上绞尽脑汁已经有一段时间了，但毫无结果，也不知道问题出在哪里。任何帮助都将不胜感激 单击以查看绘图的当前状态。代码如下： <!-- language: lang-js --> <!DOCTYPE html> <meta charset="utf-8"> <style> body {

我正在努力在D3中使用堆叠面积图并添加功能。我已经成功地生成了大（焦点）轴和小（上下文）轴，并且绘图开始看起来很好。我的问题是刷牙功能根本不起作用。我在这个问题上绞尽脑汁已经有一段时间了，但毫无结果，也不知道问题出在哪里。任何帮助都将不胜感激

单击以查看绘图的当前状态。代码如下：

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


身体{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.标记文本{
文本锚定：结束；
}
标签数量：
var margin={顶部：10，右侧：10，底部：100，左侧：40}，
margin2={顶部：430，右侧：10，底部：20，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-页边距.顶部-页边距.底部，
高度2=500-边缘2.顶部-边缘2.底部；
var parseDate=d3.time.format（“%Y-%m-%d”）.parse；
var x=d3.time.scale（）.range（[0，width]），
x2=d3.time.scale（）.范围（[0，宽度]），
y=d3.刻度.线性（）.范围（[高度，0]），
y2=d3.刻度.线性（）.范围（[height2，0]）；
var color=d3.scale.category20（）；
var xAxis=d3.svg.axis（）.scale（x）.orient（“底部”），
xAxis2=d3.svg.axis（）.scale（x2.orient（“底部”），
yAxis=d3.svg.axis（）.scale（y）.orient（“左”）；
var brush=d3.svg.brush（）
.x（x2）
.在（“刷子”，刷子）；
var area=d3.svg.area（）
.插入（“基础”）
.x（函数（d）{返回x（d.date）；}）
.y0（函数（d）{返回y（d.y0）；}）
.y1（函数（d）{返回y（d.y0+d.y）；}）；
var area2=d3.svg.area（）
.插入（“基础”）
.x（函数（d）{返回x2（d.date）；}）
.y0（函数（d）{返回y2（d.y0）；}）
.y1（函数（d）{返回y2（d.y0+d.y）；}）；
var stack=d3.layout.stack（）
.values（函数（d）{返回d.values；}）；
var oRequest=newXMLHttpRequest（）；
var sURL=“data100.tsv”；
打开（“获取”，sURL，false）；
setRequestHeader（“用户代理”，navigator.userAgent）；
oRequest.send（空）
var data=oRequest.responseText；
var data=d3.tsv.parse（数据）；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
});
color.domain（d3.keys（数据[0]）.filter（函数（键）{returnkey！==“date”}）；
var allTags=stack（color.domain（）.map）（函数（名称）{
返回{
姓名:姓名,，
值：data.map（函数（d）{
返回{date:d.date，y:+d[name]}；
})
};
}));
函数updateData（）{
var nTags=document.getElementById（'nTags_select'）。值；
tags=allTags.slice（0，nTags）；
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（标记，函数（d）{返回d3.max（d.values，函数（d）{返回d.y+d.y0；}）；}）]；
x2.域（x.域（））；
y2.域（y.域（））；
d3.选择（“svg”）.remove（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var focus=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var context=svg.append（“g”）
.attr（“transform”、“translate”（+margin2.left+）、“+margin2.top+”）；
焦点。选择全部（'路径'）
.数据（标签）
.输入（）
.append（'路径'）
.attr（'clip-path'，'url（#clip'））
.attr（“d”，函数（d）{返回区域（d.values）；}）
.attr（'class'，'focus'）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
focus.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
focus.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
context.selectAll（'path'）
.数据（标签）
.输入（）
.append（'路径'）
.attr（'class'，'context'）
.attr（“d”，函数（d）{返回区域2（d.values）；}）
.style（“fill”，函数（d）{返回颜色（d.name）；}）；
上下文。附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度2+”）
.呼叫（xAxis2）；
上下文。附加（“g”）
.attr（“类”、“x刷”）
.呼叫（刷子）
.selectAll（“rect”）
.attr（“y”，-6）
.attr（“高度”，高度2+7）；
focus.append（“文本”）
.datum（函数（d）{return{name:d.name，value:d.values[d.values.length-1]}；}）
.attr（“transform”，函数（d）{return”translate（“+x（d.value.date）+”，“+y（d.value.y0+d.value.y/2）+”）；）
.attr（“x”，-6）
.attr（“dy”，“-.35em”）
.text（函数（d）{返回d.name；}）；
};
函数brushed（）{
x、 域（brush.empty（）？x2.domain（）：brush.extent（））；
focus.selectAll（“path.focus”）.attr（“d”，区域）；
焦点。选择（“.x.axis”）。调用（xAxis）；
}
在Mike的原始代码中，他为svg元素选择了focus这个名称，这很不幸——它可能会让人困惑

无论如何，这里的问题主要是范围问题

Mike将焦点定义在获取数据的范围之外，从而将其放入全局范围。因此，它可用于
brushed（）
函数

我将采取的第一步是将
focus
var的定义移到updateData（）函数之外

然而，还有一些其他问题：

  • 您应该使用d3.tsv和匿名函数来获取数据。这将使事情变得更简单
  • 在brushed函数中，需要使用匿名函数并传递区域函数d.values，而不仅仅是d。您在updateData函数中执行了此操作，但在brushed中没有。即。： 
    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);
}