我是d3.js中的一个完整的新手，我正在处理一些代码，但它没有创建路径。请检查小提琴： http://jsfiddle.net/vatsalya25/knpzxv3f/
并告诉我我哪里出错了。
/* */
var setChartDimensions = function(l,r,t,b,w,h) {
/* Set the dimensions of the graph */
margin = {
left : l || 60,
right : r || 110,
top : t || 20,
bottom : b || 40
};
getDimensions(w,h); //
width = width - 100 - margin.left - margin.right;
height = height - margin.top - margin.bottom;
};
/* */
var setChartContainer = function(){
svg = d3.select("#container")
.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 + ")");
graph = svg.append("svg")
.attr("width", width)
.attr("height", height + margin.top + margin.bottom);
};
var xAxis_true= 0, yAxisRight_true= 0, yAxisLeft_true= 0, array = [], width, height, svg, graph;
var jsonArray=[], path, axis, time, noOfPoints = 20, tracker = 0;
var color = d3.scale.category10();
// Set the ranges
var x = d3.scale.linear().range([ 0, width ]);
var y1 = d3.scale.linear().range([ height, 0 ]);
var y2 = d3.scale.linear().range([ height, 0 ]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxisRight = d3.svg.axis().scale(y2).orient("right").ticks(5);
var yAxisLeft = d3.svg.axis().scale(y1).orient("left").ticks(5);
/* */
var getDimensions = function(w,h) {
width = w || $(window).innerWidth()/0.93;
height = h || screen.height/2.7;
$('#container').css('min-width', width);
$('#container').css('min-height', height);
};
/* */
$(window).resize(function() {
getDimensions();
});
/* Sets the points (x,y) for the path */
var valueline = d3.svg.line()
.interpolate('monotone')
.x(function(d) {
return x(d.xValue);
}).y(function(d) {
return y1(d.yValue);
});
/* */
var setXdomain = function(data) {
x.domain(d3.extent(data, function(d) {
return d.xValue;
}));
}
/* */
var setYdomain = function(data) {
y1.domain([ 0, d3.max(data, function(d) {
return d.yValue * 1.31;
}) ]);
y2.domain([ 0, d3.max(data, function(d) {
return d.yValue * 0.9;
}) ]);
}
/* */
var createPath = function(data) {
path = graph.append("g")
.append("path") // Add the valueline path.
.attr("class", "line")
.attr("d", valueline(data));
}
/* */
var addXAxis = function() {
axis = graph.append("g") // Add the X Axis
.attr("class", "xAxis")
.attr("transform","translate(0," + height + ")")
.call(xAxis);
}
/* */
var addYAxis = function(i) {
makeY = svg.append("g") // Add the Y Axis
.attr("class", "yAxis")
.style("fill", "steelblue");
if(i==0)
makeY.call(yAxisLeft);
else {
makeY.attr("transform", "translate(" + width + " ,0)");
makeY.call(yAxisRight);
}
}
/* */
var makeXGrid = function (n) {
xGrid = svg.selectAll("line.verticalGrid").data(x.ticks(n)).enter()
.append("line")
.attr({
"class":"verticalGrid",
"x1" : function(d){ return x(d);},
"x2" : function(d){ return x(d);},
"y1" : height,
"y2" : 0,
"fill" : "none",
"shape-rendering" : "geometricPrecision",
"stroke" : "#C8C8C8 ",
"stroke-width" : "1px"
});
}
/* */
var makeYGrid = function (a) {
svg.selectAll("line.horizontalGrid").data(y1.ticks(10)).enter()
.append("line")
.attr({
"class":"horizontalGrid",
"x1" : 0,
"x2" : width,
"y1" : function(d){ if(a==0) return y1(d); else return y2(d);},
"y2" : function(d){ if(a==0) return y1(d); else return y2(d);},
"fill" : "none",
"shape-rendering" : "geometricPrecision",
"stroke" : "#C8C8C8 ",
"stroke-width" : "1px"
});
}
/* */
var addTitle = function(title) {
svg.append("text") // Add the title shadow
.attr("x", (width / 2))
.attr("y", margin.top / 2)
.attr("text-anchor", "middle")
.attr("class", "shadow")
.style("font-size", "16px")
.text(title);
svg.append("text") // Add the title
.attr("class", "stock")
.attr("x", (width / 2))
.attr("y", margin.top / 2)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text(title);
}
/* Add the text label for the X axis */
var xAxisLabel = function(text) {
svg.append("text") // Add the text label for the x axis
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
.style("text-anchor", "middle")
.style("font-size", "14px")
.text(text);
}
/* Add the text label for the Y axis */
var yAxisLabel = function(text) {
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("font-size", "14px")
.style("text-anchor", "middle")
.text(text);
}
/* Function to insert Random points into the JSON */
var makeRandomPoints = function(t) {
time += 1000;
return {
"xValue" : Math.floor((Math.random() * 100)),
"yValue" : Math.floor((Math.random() * 100))
}
}
/* Function to create the chart */
var createChart = function(title, xLabel, yLabel, data, realtime, gridX, xG, gridY, yG) {
setChartDimensions(left=null, right=null, top=null, bottom=null, width=null, height=null); /* Pass values in the order left right top bottom */
setChartContainer();
setXdomain(data); /* Set the domain of X Axis */
setYdomain(data); /* Set the domain of Y Axes */
createPath(data); /* create the line (path) for the data */
addXAxis();
addYAxis(0);
if(gridX) {
makeXGrid(xG);
}
if(gridY) {
makeYGrid(yG);
}
addTitle(title);
xAxisLabel(xLabel);
yAxisLabel(yLabel);
}
/* */
var init = function () {
for(var i=0; i<noOfPoints; i++) {
array.push(makeRandomPoints());
}
console.log(array.length);
// createChart("XYZ", "X Value", "Y Value", data, 1, 5);
createChart("XYZ", "X Value", "Y Value", array, 0, true, 5, true, 5);
}
init();
错误：属性d =＆＃34; MNaN，NaNCNaN，NaN，NaN，NaN，NaN，NaNSNaN，NaN，NaN，NaNSNaN，NaN，NaN，NaNSNaN，NaN，NaN，NaNSNaN，NaN，NaN的值无效，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN ，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaNSNaN，NaN时，NaN时，NaN的＆＃34; 错误：属性d =＆＃34的值无效; Mundefined，6V0H0V6＆＃34; 错误：属性转换的值无效=＆＃34;翻译（NaN，0）＆＃34; ... 等等。
答案 0 :(得分：0)
您的比例被破坏（宽度和高度变量在以后的呼叫中未定义）：
console.log(width);
console.log(height);
var x = d3.scale.linear().range([ 0, width ]);
var y1 = d3.scale.linear().range([ height, 0 ]);
var y2 = d3.scale.linear().range([ height, 0 ]);
> undefined
> undefined
只需将.range来电转移到setDomain个功能中。
更新了fiddle。