我在d3.js中创建了一个条形图，但是现在我想要有折线图，但由于线图没有渲染，所以有一些问题。下面是我的代码我试过的请告诉我哪里出错了。下面是我的HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta content="utf-8" http-equiv="encoding">
<title>D3</title>
<!-- <link rel="stylesheet" type="text/css" href="mystyle1.css" /> -->
<style>
body {
color: #000;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
#upleft {
width: 320px;
height: 600px;
background: red;
float: left;
}
#upright {
width: 800px;
height: 50px;
background: green;
float: left
}
#below {
height: 600px;
width: 1120px;
background: blue
}
</style>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="123.js" type="text/javascript"></script>
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<div id="upleft">
<label> List of Tables : </label><br>
<div>
<select id="dropdown1"></select>
</div>
<style>
#listbox {
display: none;
}
#listbox {
position: relative;
}
</style>
<div style="margin-left: 150px; margin-top: -30px; height: auto;">
<select id="listbox" , multiple></select>
</div>
</div>
<div id="upright">
<div align="left">
From : <input type="date" name="field1" id="field1" /> To : <input type="date" name="field2" id="field2" />
<input type="button" onclick="render(true)" value="Submit" />
</div>
</div>
<div id="below">
<div id="chart"></div>
</div>
<script>
var jsonURL = 'avb.json';
var myData = [];
var fliterdata = [];
var tempdata = [];
var selectop = "";
var selectDate = false;
function filterJSON(json, key, value) {
var result = [];
for (var foo in json) {
if (json[foo][key] == value) {
result.push(json[foo]);
}
}
return result;
}
function selectValue(d) {
// console.log("before op",selectop );
switch (selectop) { //d object select particular value for Y axis
case "01":
return d.val001;
break;
case "02":
return d.val002;
break;
case "03":
return d.val003;
break;
case "04":
return d.val004;
break;
case "05":
return d.val005;
break;
default:
//console.log("default");
return d.val001;
}
}
var margin = {
top: 20,
right: 0,
bottom: 80,
left: 40
};
var width = 700 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangePoints([0, width], 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) {
return x(d.alphabet);
})
.y(function(d) {
return y(d.frequency);
});
var svg = d3.select("body").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 + ")");
xScale.domain(tempData.map(function(d) {
return d.date;
}).sort(function(a, b) {
return a > b;
}));
yScale.domain([0, d3.max(tempData, function(d) {
return +selectValue(d);
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Y - Axis");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
//});
}
var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var yScale = d3.scale.linear().range([height, 0]);
var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d"));
var vAxis = d3.svg.axis().scale(yScale).orient('left');
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('background', '#f4f4f4')
.style('padding', '5 15px')
.style('border', '1px #333 solid')
.style('border-radius', '5px')
.style('opacity', 'o');
function render(filterByDates) {
d3.select('svg').remove();
if (filterByDates) {
selectDate = true;
tempData = fliterdata;
console.log("before date fliter data", tempData);
var date1 = new Date(document.getElementById('field1').value);
var date2 = new Date(document.getElementById('field2').value);
tempData = tempData.filter(function(d) {
console.log(date1, date2);
// alert(date1);
return d.date >= date1 && d.date <= date2;
});
console.log("After date fliter data", tempData);
}
.attr("width", xScale.rangeBand())
.attr("y", function(d) {
return yScale(selectValue(d));
})
.attr("height", function(d) {
console.log("as", d.value);
return height - yScale(selectValue(d));
})
}
d3.json(jsonURL, function(data) {
myData = data; //data from json in mydata
myData.forEach(function(d) {
d.date = new Date(d.date);
//d.value="";
//d.name = +d.name;
console.log(d.date, "Gt date");
d.date = new Date(d.date + " UTC");
console.log(d.date, "localtimezone date");
});
$("#listbox").on("click", function() {
var key = $(this).val();
console.log("key:", key);
var value = $('#listbox option:selected').text();
console.log("vaue:", value);
selectop = String(key);
selectop = selectop.slice(-2);
console.log("mydata: ", myData);
console.log("selectops:", selectop);
fliterdata = filterJSON(myData, key, value); //selected value from user and picks the whole element that contains that attribute
console.log("fliterdata: ", fliterdata);
tempData = fliterdata; //graph made by temp data
if (selectDate)
render(true);
});
});
</script>
</body>
</html>
我的json文件
[ {
"name": "ABC",
"date": 1459461600000,
"attr001": "intSIGN1",
"val001": "60",
"attr002": "SIGN2",
"val002": "5",
"attr003": "SIGN3",
"val003": "100.00",
"attr004": "SIGN4",
"val004": "0",
"attr005": "SIGN5",
"val005": "Traesnotfound"
},
{
"name": "ABC",
"date": 1461176704000,
"attr001": "SIGN1",
"val001": "200",
"attr002": "SIGN2",
"val002": "70",
"attr003": "SIGN3",
"val003": "100.00",
"attr004": "SIGN4",
"val004": "670",
"attr005": "SIGN5",
"val005": "Traceinvalid"
},
{ "name": "ABC",
"date": 1459125900000,
"attr001": "SIGN1",
"val001": "500",
"attr002": "SIGN2",
"val002": "70",
"attr003": "SIGN3",
"val003": "100.00",
"attr004": "SIGN4",
"val004": "670",
"attr005": "SIGN5",
"val005": "Traceinvalid"
},
{ "name": "XYZ",
"date": 1459125900000,
"attr001": "VISSE1",
"val001": "100",
"attr002": "VISSE2",
"val002": "7",
"attr003": "VISSE3",
"val003": "300.00",
"attr004": "VISSE4",
"val004": "160",
"attr005": "SIGN5",
"val005": "not found"
},
{ "name": "XYZ",
"date": 1459461600000,
"attr001": "VISSE1",
"val001": "50",
"attr002": "VISSE2",
"val002": "70",
"attr003": "VISSE3",
"val003": "300.00",
"attr004": "VISSE4",
"val004": "230",
"attr005": "SIGN5",
"val005": "found"
},
{ "name": "XYZ",
"date": 1459461900000,
"attr001": "VISSE1",
"val001": "300",
"attr002": "VISSE2",
"val002": "10",
"attr003": "VISSE3",
"val003": "500.00",
"attr004": "VISSE4",
"val004": "350",
"attr005": "SIGN5",
"val005": "not found" },
{ "name": "ABC",
"date": 1462188244000,
"attr001": "SIGN1",
"val001": "300",
"attr002": "VISSE2",
"val002": "10",
"attr003": "VISSE3",
"val003": "500.00",
"attr004": "VISSE4",
"val004": "350",
"attr005": "SIGN5",
"val005": "not found" } ]