1

我已经尝试了一些示例来获得带有画笔和缩放功能的多线图。但最后卡在了一个部分。只画了一条线。有人可以帮忙吗？这是我关注的链接http://bl.ocks.org/mbostock/1667367：

在此处输入图像描述

这是我的 jsfiddle 这个链接Fiddle

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("%d-%b-%Y").parse;
var formatTime = d3.time.format("%e %B");

var x = d3.time.scale().range([0, width]);
var x2 = d3.time.scale().range([0, width]);

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

var color = d3.scale.category10();

var div = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

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

var yAxis = d3.svg.axis().scale(y).orient("left");

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

var val = [{"date":"15-Jul-2013","close":"1.50","sharp":"2.50","sortino":"3.66"},
       {"date":"20-Jul-2013","close":"2.50","sharp":"2.55","sortino":"3.72"},
       {"date":"31-Jul-2013","close":"3.50","sharp":"2.57","sortino":"3.75"},
       {"date":"01-Aug-2013","close":"3.30","sharp":"2.71","sortino":"3.97"},
       {"date":"02-Aug-2013","close":"4.50","sharp":"2.75","sortino":"4.01"},
       {"date":"05-Aug-2013","close":"3.60","sharp":"2.75","sortino":"4.00"},
       {"date":"06-Aug-2013","close":"1.30","sharp":"2.65","sortino":"3.87"},
       {"date":"09-Aug-2013","close":"2.20","sharp":"2.59","sortino":"3.81"},
       {"date":"10-Aug-2013","close":"2.70","sharp":"2.64","sortino":"3.87"},
       {"date":"21-Aug-2013","close":"2.50","sharp":"2.60","sortino":"3.82"},
       {"date":"26-Aug-2013","close":"3.20","sharp":"2.62","sortino":"3.84"},
       {"date":"24-Aug-2013","close":"4.10","sharp":"2.66","sortino":"3.89"},
       {"date":"28-Aug-2013","close":"2.50","sharp":"2.60","sortino":"3.82"}];

var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });

var line2 = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x2(d.date); })
.y(function(d) { return y2(d.temperature); });

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 + ")");

var filter = ['close','sortino','sharp'];

d3.tsv("data.tsv", function(error, data) {
data = val;
 color.domain(d3.keys(data[0]).filter(function(key) { if(filter.indexOf(key)!=-1)return key; }));

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

var today = new Date() ;
today.setDate(today.getDate() - 5);

//alert(today);
var xs =5;
window.cities = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
        //alert(valueOf(today));
        return {date: d.date, temperature: +d[name]};
  })
};
});

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature;         }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature;  }); })
]);

x2.domain(x.domain());
y2.domain(y.domain());




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

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

focus.append("path")
.data(cities)
.attr("clip-path", "url(#clip)")
.transition()
.duration(2000)
.ease('linear')
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });

context.append("path")
.data(cities)
.transition()
.duration(2000)
.ease('linear')
.attr("class", "line")
.attr("d", function(d) { return line2(d.values); })
.style("stroke", 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);


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

0 回答 0