Question

我想在d3js中将一行转换为另一行。按下我的按钮后，我一直收到NaN错误。整个JSFiddle就在这里：

var finales = [{
  lpchange: 17,
  kills: 10,
  deaths: 0,
  assists: 11
}, {
  lpchange: -18,
  kills: 0,
  deaths: 3,
  assists: 1
}, {
  lpchange: -17,
  kills: 4,
  deaths: 12,
  assists: 4
}, {
  lpchange: -19,
  kills: 1,
  deaths: 3,
  assists: 2
}, {
  lpchange: 21,
  kills: 12,
  deaths: 6,
  assists: 14
}, {
  lpchange: -19,
  kills: 4,
  deaths: 5,
  assists: 0
}, {
  lpchange: 21,
  kills: 5,
  deaths: 5,
  assists: 16
}, {
  lpchange: 20,
  kills: 9,
  deaths: 7,
  assists: 8
}, {
  lpchange: -21,
  kills: 4,
  deaths: 6,
  assists: 17
}, {
  lpchange: 20,
  kills: 5,
  deaths: 1,
  assists: 6
}, {
  lpchange: 21,
  kills: 6,
  deaths: 5,
  assists: 4
}, {
  lpchange: -19,
  kills: 8,
  deaths: 7,
  assists: 12
}, {
  lpchange: 18,
  kills: 12,
  deaths: 4,
  assists: 4
}, {
  lpchange: -17,
  kills: 8,
  deaths: 5,
  assists: 9
}, {
  lpchange: -18,
  kills: 4,
  deaths: 5,
  assists: 10
}, {
  lpchange: 19,
  kills: 6,
  deaths: 6,
  assists: 12
}, {
  lpchange: -18,
  kills: 3,
  deaths: 7,
  assists: 1
}, {
  lpchange: 17,
  kills: 1,
  deaths: 7,
  assists: 17
}, {
  lpchange: 19,
  kills: 8,
  deaths: 2,
  assists: 7
}, {
  lpchange: 18,
  kills: 17,
  deaths: 5,
  assists: 8
}, {
  lpchange: -20,
  kills: 3,
  deaths: 8,
  assists: 11
}, {
  lpchange: 19,
  kills: 12,
  deaths: 7,
  assists: 16
}, {
  lpchange: -17,
  kills: 3,
  deaths: 3,
  assists: 1
}, {
  lpchange: 20,
  kills: 4,
  deaths: 7,
  assists: 25
}, {
  lpchange: 18,
  kills: 15,
  deaths: 11,
  assists: 11
}, {
  lpchange: 19,
  kills: 14,
  deaths: 4,
  assists: 5
}, {
  lpchange: -17,
  kills: 2,
  deaths: 7,
  assists: 4
}, {
  lpchange: 19,
  kills: 3,
  deaths: 1,
  assists: 18
}, {
  lpchange: -18,
  kills: 6,
  deaths: 8,
  assists: 7
}, {
  lpchange: -19,
  kills: 6,
  deaths: 4,
  assists: 7
}];
var xglarryxg = [{
  lpchange: 21,
  kills: 5,
  deaths: 4,
  assists: 10
}, {
  lpchange: -15,
  kills: 5,
  deaths: 6,
  assists: 8
}, {
  lpchange: -17,
  kills: 1,
  deaths: 7,
  assists: 8
}, {
  lpchange: 19,
  kills: 4,
  deaths: 2,
  assists: 8
}, {
  lpchange: 21,
  kills: 5,
  deaths: 2,
  assists: 11
}, {
  lpchange: 19,
  kills: 1,
  deaths: 3,
  assists: 14
}, {
  lpchange: -18,
  kills: 5,
  deaths: 10,
  assists: 14
}, {
  lpchange: -20,
  kills: 8,
  deaths: 9,
  assists: 11
}, {
  lpchange: 19,
  kills: 7,
  deaths: 5,
  assists: 13
}, {
  lpchange: -19,
  kills: 2,
  deaths: 5,
  assists: 1
}, {
  lpchange: -17,
  kills: 5,
  deaths: 7,
  assists: 2
}, {
  lpchange: -18,
  kills: 5,
  deaths: 10,
  assists: 12
}, {
  lpchange: 21,
  kills: 7,
  deaths: 6,
  assists: 12
}, {
  lpchange: -18,
  kills: 11,
  deaths: 6,
  assists: 17
}, {
  lpchange: -21,
  kills: 10,
  deaths: 7,
  assists: 10
}, {
  lpchange: 19,
  kills: 6,
  deaths: 3,
  assists: 2
}, {
  lpchange: -17,
  kills: 5,
  deaths: 10,
  assists: 16
}, {
  lpchange: -19,
  kills: 7,
  deaths: 4,
  assists: 9
}, {
  lpchange: 21,
  kills: 13,
  deaths: 4,
  assists: 18
}, {
  lpchange: 18,
  kills: 6,
  deaths: 2,
  assists: 6
}, {
  lpchange: 20,
  kills: 1,
  deaths: 7,
  assists: 19
}, {
  lpchange: 19,
  kills: 13,
  deaths: 6,
  assists: 19
}, {
  lpchange: -21,
  kills: 5,
  deaths: 6,
  assists: 4
}, {
  lpchange: -19,
  kills: 3,
  deaths: 7,
  assists: 3
}, {
  lpchange: -20,
  kills: 0,
  deaths: 1,
  assists: 1
}, {
  lpchange: -20,
  kills: 7,
  deaths: 3,
  assists: 6
}, {
  lpchange: -19,
  kills: 0,
  deaths: 7,
  assists: 8
}, {
  lpchange: -17,
  kills: 4,
  deaths: 8,
  assists: 19
}, {
  lpchange: 18,
  kills: 5,
  deaths: 5,
  assists: 12
}, {
  lpchange: -18,
  kills: 9,
  deaths: 10,
  assists: 7
}];


var vis = d3.select("#visualization"),

  width = 1000,
  height = 500,
  margins = {
    top: 20,
    right: 50,
    bottom: 20,
    left: 50
  };


xScale = d3.scale.linear().range([margins.left, width - margins.right]).domain([30, 1]);

yScale = d3.scale.linear().range([height - margins.top, margins.bottom]).domain([-100, 100]);

zScale = d3.scale.linear().range([height - margins.top, margins.bottom]).domain([0, 25]);

xAxis = d3.svg.axis()
  .scale(xScale);

yAxis = d3.svg.axis()
  .scale(yScale)
  .orient('left');

zAxis = d3.svg.axis()
  .scale(zScale)
  .orient('right');


var rectangleheight = ((500 - (margins.top) - (margins.bottom)) / 2) - 1;

vis.append("rect")
  .attr("x", (margins.left))
  .attr("y", (margins.top))
  .attr("fill", "#DDFFDA")
  .attr("width", 1000 - (margins.left) - (margins.right))
  .attr("height", rectangleheight);

vis.append("rect")
  .attr("x", (margins.left))
  .attr("y", (margins.top + rectangleheight))
  .attr("fill", "#FFDFDF")
  .attr("width", 1000 - (margins.left) - (margins.right))
  .attr("height", (500 - (margins.top) - (margins.bottom)) / 2);

vis.append("line")
  .attr("x1", margins.left)
  .attr("x2", 1000 - margins.right)
  .attr("y1", margins.top + rectangleheight)
  .attr("y2", margins.top + rectangleheight)
  .style("stroke", "black")
  .style("stroke-width", "1");


vis.append("svg:g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height - margins.bottom) + ")")
  .call(xAxis);

vis.append("svg:g")
  .attr("class", "axis")
  .attr("transform", "translate(" + (margins.left) + ",0)")
  .call(yAxis);

vis.append("svg:g")
  .attr("class", "axis")
  .attr("transform", "translate(" + (width - margins.right) + ",0)")
  .call(zAxis);

var total;

var lineGen = d3.svg.line()
  .x(function(d, i) {
    return xScale(i + 1);
  })
  .y(function(d, i) {
    if (i === 0) {
      total = 0;
    }
    total += d.lpchange;
    return yScale(total);
  })
  .interpolate("basis");


var kdaGen = d3.svg.line()
  .x(function(d, i) {
    return xScale(i + 1);
  })
  .y(function(d) {
    if (d.deaths === 0) {
      return zScale(d.kills + d.assists);
    } else {
      return zScale((d.kills + d.assists) / d.deaths);
    }
  })
  .interpolate("basis");

var finaleskda = vis.append('svg:path')
  .attr('d', kdaGen(finales))
  .attr('stroke', 'yellow')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

var larrykda = vis.append('svg:path')
  .attr('d', kdaGen(xglarryxg))
  .attr('stroke', 'purple')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

var finales = vis.append('svg:path')
  .attr('d', lineGen(finales))
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

var larry = vis.append('svg:path')
  .attr("class", "larrykda")
  .attr('d', lineGen(xglarryxg))
  .attr('stroke', 'red')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

$("#button").on("click", function() {
  d3.select(".larrykda")
    .transition()
    .duration(400)
    .attr('d', kdaGen(finales));
});

.axis path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}
.axis text {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

<button id="button">BUTTON</button>
<div id="graph">
  <svg id="visualization" width="1000" height="500"></svg>
</div>

我认为错误的部分是：

$("#button").on("click", function () {
    d3.select(".larrykda")
        .transition()
        .duration(400)
        .attr('d', kdaGen(finales));
});

但我不确切地知道错误在哪里。

Answer 1

您重新定义的finales作为d3选择：

var finales = vis.append('svg:path')
  ...

它不再持有你的阵列了。

D3JS折线图线之间的过渡

1 个答案: