Question

我正在尝试将一些嵌套数据转换为8个单独的折线图（每个键一个图表）。到目前为止，我正在为每个svg创建一个图表，但是我遇到y-domain的问题 - 专门为每个图表设置y-domain。

目前：

var line = d3.svg.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.app); })

x.domain(d3.extent([parseDate("2003.0"), parseDate("2014.0")]));
y.domain(d3.extent([0,20000]));

var data2 = d3.nest()
  .key(function(d) { return d.race; })
  .entries(data);

var svgContainer = d3.selectAll("body")
    .data(data2)
    .enter()
    .append("svg")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .append("path")
    .data(data2)
    .attr('id', function(d) { return d.key ;})
    .attr('class', 'line')
    .attr('opacity', .8)
    .attr('d', function(d) { return line(d.values); });

我在svg中看到了一些线条的一部分，但大多数都被切掉了。有什么建议？我不确定路径是否正确。

数据：

    { key: "1", values: 0: ['app' : 50000, year: '2003'], 1: ['app': 20000, year: '2004'], 
      key: "2" values: 0: ['app' : 40000, year: '2003'], 1: ['app' 50000, year: '2004']
    etc...}

Answer 1

修改后的Creating a Linear Gravity Field in Swift

var svgContainer = d3.select("body").selectAll(".line")
    .data(data2)
    .enter()
    .append("svg")
        .attr("transform", "translate(" + margin.left + "," + margin.top+ ")")
    .append("g")
    .each(function(d, i){

        var eachRace = d.values;
        console.log(eachRace);
        var svg = d3.select(this);
        var yMax = d3.max(eachRace, function(d) { return d.app; });
        var yScale = d3.scale.linear().domain([0, yMax]).range([height/8, 0]);
        var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);

        var line = d3.svg.line()
        .x(function (d) { return x(d.date); })
        .y(function (d) { return yScale(d.app); })

        svg.append("path")
        .attr("id", function(d) { return d.key ;})
        .attr('class', 'line')
        .attr('opacity', .8)
        .attr('d', function(d) { return line(d.values); })

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

Answer 2

您可以将extent直接应用于您的数据，如下所示：

 yScale.domain(d3.extent(data, function(d) { return d.app; }));

这将为您提供所有数据的范围。如果需要获取数据部分的范围，例如在一个类别与另一个类别的情况下，则需要获取某些过滤函数的结果范围。您应该查看d3.filter或在extent()内编写自己的> testdat <- data.frame(matrix(1:16,ncol=4)) > testdat == 6 | testdat == 9 X1 X2 X3 X4 [1,] FALSE FALSE TRUE FALSE [2,] FALSE TRUE FALSE FALSE [3,] FALSE FALSE FALSE FALSE [4,] FALSE FALSE FALSE FALSE > testdat[testdat == 6 | testdat == 9] <- 999 > testdat X1 X2 X3 X4 1 1 5 999 13 2 2 999 10 14 3 3 7 11 15 4 4 8 12 16。因此，您可能希望根据与当前密钥匹配的d.key来设置返回值，但是您要存储它。

d3嵌套数据 - 单个图表 - 设置y.domain？

2 个答案: