2

Chained Transitions http://bl.ocks.org/mbostock/3903818でこのコード サンプルから作業し ています。tsv の代わりに csv ファイルを解析するように独自のコードを設定しました。ただし、新規ビューから既存ビューに切り替えると、Javascript コンソールで Error parsing D3 d=""repeated two times というエラーが表示されます。エラーの原因が各関数のデータであるかどうかはわかりません。コードは以下のとおりです。

var margin = {top: 20, right: 50, bottom: 30, left: 60},
    width = 878 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

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

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

    var color = d3.scale.category10();

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

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

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

    var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

    var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")



//Add grid lines
function make_X_axis() {        
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(6)
}

function make_Y_axis() {        
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(9)
}

//Parse data
d3.csv("data/newdata2.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
      d.date = parseDate(d.date);
    d["New"] = +d["New"];
    d["Existing"] = +d["Existing"];
  });


  var homes = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, price: +d[name]};
    })
  };
});

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

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

  svg.append("g")  
  .attr("class", "grid")
  .attr("transform", "translate(0," + height + ")")
  .call(make_X_axis()
    .tickSize(-height, 0, 0)
    .tickFormat("")
    )

  svg.append("g")         
  .attr("class", "grid")
  .call(make_Y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat("")
    )

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

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

  svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Thousands($)");

  var city = svg.selectAll(".city")
  .data(homes)
  .enter().append("g")
  .attr("class", "city");


  city.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.name); });

  city.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.price) + ")"; })
  .attr("x", 3)
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });

  d3.selectAll("input").on("change", change);

  var timeout = setTimeout(function() {
    d3.select("input[value=\"Existing\"]").property("checked", true).each(change);
}, 2000);

  function change() {
    clearTimeout(timeout);

    city = this.value;

    // First transition the line & label to the new city.
    var t0 = svg.transition().duration(750);
    t0.selectAll(".line").attr("d", line);
    t0.selectAll(".label").attr("transform", transform).text(city);

    // Then transition the y-axis.
    y.domain(d3.extent(data, function(d) { return d[city]; }));
    var t1 = t0.transition();
    t1.selectAll(".line").attr("d", line);
    t1.selectAll(".label").attr("transform", transform);
    t1.selectAll(".y.axis").call(yAxis);
}

function transform(d) {
    return "translate(" + x(d.date) + "," + y(d[city]) + ")";
}
});
4

1 に答える 1

1

線を作成するコードではd.values、パスを描画するためのデータとして参照しています。

city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });

ただし、変更ハンドラでは、(2 回) 呼び出すだけです。

t0.selectAll(".line").attr("d", line);

2 ビットのコードを一致させると、問題が修正されます。つまり、change 関数の 2 つの呼び出しを次のように変更します。

t0.selectAll(".line").attr("d", function(d) { return line(d.values); });
于 2013-05-01T20:00:12.727 に答える