线条和样式的颜色显示错误

Question

我正在尝试创建一个基于上下文焦点刷牙的图表，显示的是以分钟为单位的x轴。因此，当我刷上下文时，相应的图表将显示在焦点区域以供选择。但是我在图表中发现了一些问题。

1.Line未以线性格式显示。 2.Color不会根据应用程序ID更改行。

我的代码：

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 color = d3.scale.category10();

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 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 line=d3.svg.line()
         .x(function(d) {return x(d.date);})
         .y(function(d) { return y(d.price)})
         .interpolate('linear');

var line2=d3.svg.line()
         .x(function(d) {return x2(d.date);})
         .y(function(d) { return y2(d.price)})
         .interpolate('linear');


var svg = d3.select("#graphid").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)
    .attr("backcolor","lightblue");



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


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

var data = d3.csv.parse( d3.select("pre#data").text() );

     data.forEach(function(d,i) {
        d.date = new Date(+d.date/100);
        d.price = +d.price;
    });
  x.domain(d3.extent(data.map(function(d) { return d.date; })));
  y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  x2.domain(x.domain());
  y2.domain(y.domain());


  // Nest the entries by application
var dataNest = d3.nest()

              .key(function(d) {return d.applicationid;})

        .entries(data);


      focus.selectAll("g").data(dataNest)
            .enter()
            .append("g")
            .attr("id", function(d) { return "f" +d.key.replace(/\s+/g, '') })
      .append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return d.color= color(d.key)})
      .attr("stroke-width",2)
      .attr("fill","none");

  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("g").data(dataNest)
          .enter()
          .append("g")
          .attr("id", function(d) { return "c" +d.key.replace(/\s+/g, '') })
          .append("path")
          .attr("class", "line")
          .attr("d", function(d) { return line2(d.values); })
        .style("stroke", function(d) { return d.color= color(d.key)})
          .attr("stroke-width",2)
          .attr("fill","none");


  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(".line").attr("d", line);
  focus.selectAll("path.line").attr("d", function(d) { return line(d.values); }); 
  focus.select(".x.axis").call(xAxis);
}

我的数据是：

<pre id="data">

    applicationid,application,date,price
    202270,application1,1377244506.794737,1200
    202270,application1,1377244506.898609,1266.42
    202270,application1,1377244506.994899,1298.58
    202270,application1,1377244507.095995,1252.43
    202270,application1,1377244507.194835,1220.6
    202270,application1,1377244507.295265,1254.6
    202270,application1,1377244507.395149,1230.83
    202270,application1,1377244507.495221,1217.68
    202270,application1,1377244507.59541,1236.51
    202270,application1,1377244507.710992,1429.4
    202270,application1,1377244507.795081,1314.95
    202270,application1,1377244507.895482,1320.28
    202944,application2,1377244507.995466,1100
    202944,application2,1377244508.095888,1234
    202944,application2,1377244508.195787,1567
    202944,application2,1377244508.294706,1657.8
    202944,application2,1377244508.39531,1800
    202944,application2,1377244508.49563,1818
    202944,application2,1377244508.59497,900
    202944,application2,1377244508.69526,1000
    202944,application2,1377244508.795564,1200
    202944,application2,1377244507.395149,1101
    202944,application2,1377244506.994899,896.24
    202944,application2,1377244507.395149,903.25
    202944,application2,1477244506.794737,1001
    202944,application2,1477244506.898609,1034
    202944,application2,1477244506.994899,1067
    202944,application2,1477244507.095995,1057.8
    202944,application2,1377244508.195787,1001
    202944,application2,1377244508.69526,1018
    202944,application2,1377244508.69526,1211
    202944,application2,1477244506.794899,110
    202944,application2,1477244506.794819,101
    202944,application2,1477244506.394899,101
    202944,application2,1477244506.794899,806.24
    202944,application2,1477244506.594899,93.25
    203715,application3,1477344506.794737,1200
    203715,application3,1477344506.898609,1266.42
    203715,application3,1477344506.994899,1198.58
    203715,application3,1477344507.095995,1152.43
    203715,application3,1477344507.194835,820.6
    203715,application3,1477344507.295265,754.6
    203715,application3,1477344507.395149,1630.83
    203715,application3,1477344507.777149,1117.68
    203715,application3,1477344507.175149,1536.51
    203715,application3,1477344507.395149,1429.4
    203715,application3,1477344507.395149,1114.95
    203715,application3,1477344507.395149,1301.28
    </pre>

我在这里缺少什么？

完整的工作代码演示可以在http://fiddle.jshell.net/zua7L31d/1/

中找到

Answer 1

问题＃1：线条未以线性格式显示。

解决方案：

您使用的日期信息无效。这就是没有正确渲染线条的原因。我不知道为什么代码中的日期信息有小数点。如果你纠正它并使用适当的格式解析，代码将起作用。

var parseDate = d3.time.format("%Y%m%d").parse;
data = data.map( function (d) { 
    return {         
      applicationid: d.applicationid,
      date: parseDate(d.date),
      price: +d.price 
    }; 
});

问题＃2：根据应用程序ID，行的颜色不会改变。

解决方案：

要获取每个应用程序ID的唯一颜色代码，请使用以下代码。

var appIds = data.map(function(d){return d.applicationid});
var uniqAppIds = appIds.filter(function(d,i){return appIds.indexOf(d)==i });
var color = d3.scale.category10().domain(appIds);

//color(d.key) in your code will now return distinct colors for each application id.

这是工作JSFiddle