1
を折れ線グラフで未定義のプロパティ「長さ」を読み込めません、しかし、私は次のエラーを持っている：キャッチされない例外TypeError：私は私のマップ内のいくつかのデータを取得しようとしていますJSONデータ
Uncaught TypeError: Cannot read property 'length' of undefined.
これは私のコードです：
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
\t stroke: steelblue;
\t stroke-width: 2;
\t fill: none;
}
.axis path,
.axis line {
\t fill: none;
\t stroke: grey;
\t stroke-width: 1;
\t shape-rendering: crispEdges;
}
div.tooltip {
position: absolute; \t
text-align: center; \t
width: 60px; \t
height: 28px; \t \t
padding: 2px; \t
font: 12px sans-serif; \t
background: lightsteelblue; \t
border: 0px; \t \t \t \t \t
border-radius: 8px;
/* pointer-events: none; \t This line needs to be removed */
\t
}
</style>
<body>
<!-- load the d3.js library --> \t
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// Set the dimensions of the canvas/graph
var \t w = window.innerWidth,
h = window.innerHeight,
margin = {top: 30, right: 20, bottom: 30, left: 50},
\t width = 600 - margin.left - margin.right,
\t height = 270 - margin.top - margin.bottom;
// Parse the date/time
var \t parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");// Format tooltip date/time
// We're passing in a function in d3.max to tell it what we're maxing (x value)
var x = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.x + 10; })])
.range([margin.left, w - margin.right]); // Set margins for x specific
// We're passing in a function in d3.max to tell it what we're maxing (y value)
var y = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.y + 10; })])
.range([margin.top, h - margin.bottom]); // Set margins for y specific
// Add a X and Y Axis (Note: orient means the direction that ticks go, not position)
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
// Define the line
var \t valueline = d3.svg.line()
\t .x(function(d) { return x(d.x); })
\t .y(function(d) { return y(d.y); });
// Define 'div' for tooltips
var div = d3.select("body")
\t .append("div") // declare the tooltip div
\t .attr("class", "tooltip") // apply the 'tooltip' class
\t .style("opacity", 0); // set the opacity to nil
// Adds the svg canvas
var \t svg = d3.select("body")
\t .append("svg")
\t \t .attr("width", width + margin.left + margin.right)
\t \t .attr("height", height + margin.top + margin.bottom)
\t .append("g")
\t \t .attr("transform",
\t \t "translate(" + margin.left + "," + margin.top + ")");
// Get the data
var datajson = '[ { x: 100, y: 110 }, { x: 83, y: 43 }, { x: 92, y: 28 }, { x: 49, y: 74 }, { x: 51, y: 10 }, { x: 25, y: 98 }, { x: 77, y: 30 }, { x: 20, y: 83 }, { x: 11, y: 63 }, { x: 4, y: 55 }, { x: 0, y: 0 }, { x: 85, y: 100 }, { x: 60, y: 40 }, { x: 70, y: 80 }, { x: 10, y: 20 }, { x: 40, y: 50 }, { x: 25, y: 31 } ]';
var data = JSON.parse(datajson);
\t data.forEach(function(d) {
\t \t d.x = d.x;
\t \t d.y = +d.y;
\t });
\t // Add the valueline path.
\t svg.append("path") \t \t
\t \t .attr("class", "line")
\t \t .attr("d", valueline(data));
\t // draw the scatterplot
\t svg.selectAll("dot") \t \t \t \t \t \t \t \t \t
\t \t .data(data) \t \t \t \t \t \t \t \t \t \t \t
\t .enter().append("circle") \t \t \t \t \t \t \t \t
\t \t .attr("r", 5) \t
\t \t .attr("cx", function(d) { return x(d.x); }) \t \t
\t \t .attr("cy", function(d) { return y(d.y); })
\t // Tooltip stuff after this
\t .on("mouseover", function(d) { \t \t
div.transition()
\t \t \t \t .duration(500) \t
\t \t \t \t .style("opacity", 0);
\t \t \t div.transition()
\t \t \t \t .duration(200) \t
\t \t \t \t .style("opacity", .9); \t
\t \t \t div \t .html(
\t \t \t \t '<a href= "http://google.com">' + // The first <a> tag
\t \t \t \t d.x +
\t \t \t \t "</a>" + // closing </a> tag
\t \t \t \t "<br/>" + d.y) \t
\t \t \t \t .style("left", (d3.event.pageX) + "px") \t \t \t
\t \t \t \t .style("top", (d3.event.pageY - 28) + "px");
\t \t \t });
\t // Add the X Axis
\t svg.append("g") \t
\t \t .attr("class", "x axis")
\t \t .attr("transform", "translate(0," + height + ")")
\t \t .call(xAxis);
\t // Add the Y Axis
\t svg.append("g") \t
\t \t .attr("class", "y axis")
\t \t .call(yAxis);
</script>
</body>それはライン59でうまくいかない：
var y = d3.scale.linear()
.domain([0, d3.max(data, function (d) { return d.y + 10; })])
私はポイントを使って折れ線グラフをプロットしようとしています。
をあなたの例では、[MCVE]であることを確認してください。 – evolutionxbox