<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Simple Line Graph using SVG and d3.js</title>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style>
/* tell the SVG path to be a thin blue line without any area fill */
svg {
border: 1px solid red;
}
.text-anchor{
font-size: 15px;
}
path {
stroke: steelblue;
stroke-width: 1;
fill: none;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: lightgrey;
}
.x.axis .minor {
stroke-opacity: .5;
}
.x.axis path {
display: none;
}
.y.axis line, .y.axis path {
fill: none;
stroke: #000;
}
</style>
</head>
<body>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>
<script>
/* implementation heavily influenced by http://bl.ocks.org/1166403 */
//var json=[{"created_at":1385481173,"ranking":[["#OBAMA",88],["#TCOT",82]]},{"created_at":1385481233,"ranking":[["#OBAMA",86],["#TCOT",62]]},{"created_at":1385481293,"ranking":[["#OBAMA",82],["#TCOT",42]]},{"created_at":1385481353,"ranking":[["#OBAMA",67],["#TCOT",62]]},{"created_at":1385481413,"ranking":[["#OBAMA",88],["#TCOT",22]]}];
var json = ["{\"created_at\":1385481755,\"rankings\":[[\"#OBAMA\",91],[\"#TCOT\",65],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",20],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481749,\"rankings\":[[\"#OBAMA\",90],[\"#TCOT\",64],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",19],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481743,\"rankings\":[[\"#OBAMA\",90],[\"#TCOT\",64],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",18],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481737,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",63],[\"#OBAMACARE\",28],[\"#IRAN\",27],[\"#MTVSTARS\",18],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#PJNET\",12],[\"#POPCORN\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481731,\"rankings\":[[\"#OBAMA\",91],[\"#TCOT\",64],[\"#OBAMACARE\",29],[\"#IRAN\",27],[\"#MTVSTARS\",17],[\"#BENGHAZI\",17],[\"#TEAPARTY\",15],[\"#POPCORN\",11],[\"#CARAMEL\",11],[\"#IMMIGRATION\",11]]}","{\"created_at\":1385481725,\"rankings\":[[\"#OBAMA\",61],[\"#TCOT\",63],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",17],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",11],[\"#CARAMEL\",11],[\"#POPCORN\",11]]}","{\"created_at\":1385481719,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",64],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#CARAMEL\",11],[\"#POPCORN\",11]]}","{\"created_at\":1385481713,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",33],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#POPCORN\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481707,\"rankings\":[[\"#OBAMA\",94],[\"#TCOT\",66],[\"#IRAN\",28],[\"#OBAMACARE\",28],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#CARAMEL\",11],[\"#PJNET\",11]]}","{\"created_at\":1385481701,\"rankings\":[[\"#OBAMA\",94],[\"#TCOT\",66],[\"#IRAN\",28],[\"#OBAMACARE\",28],[\"#MTVSTARS\",16],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#PJNET\",12]]}"];
// var temp_json;
// $.ajax({
// type: 'GET',
// url: "http://localhost:4567/past_rankings.json", // JQuery loads serverside.php
// dataType: 'json',
// //data: json,
// async: false,
// success: function(json) { temp_json = json;}
// });
//comment this line if you want to use local data
//json = temp_json ;
//parse json
$.each(json,function(index,value){
json[index]= JSON.parse(value);
// convert epoch time to js epoch time (milliseconds)
json[index].created_at = json[index].created_at * 1000 ;
});
// define dimensions of graph
var m = [80, 80, 80, 80]; // margins
var w = 1200 - m[1] - m[3]; // width
var h = 600 - m[0] - m[2]; // height
var format = d3.time.format("%Y-%m-%d %H:%M:%S");
//specify ranges and domains
var color = d3.scale.category10();
var x = d3.time.scale().domain( d3.extent(json,function (d){return d.created_at}) ).range([0, w]);
var y = d3.scale.linear().domain([0, d3.max(json, function (d) {
return Math.max(d.rankings[0][1],d.rankings[1][1]);
})]).range([h, 0]);
var line = d3.svg.line()
// assign the X function to plot our line as we wish
.x(function(d,i) {
//console.log(d);
//console.log('Plotting X value for data point to be at: ' + d.created_at + ' using our xScale.');
return x(d.created_at);
})
.y(function(d) {
//console.log('Plotting Y value for data point to be at:' + d.rankings[0][1] + " using our yScale.");
return y(d.rankings[0][1]);
})
var line2 = d3.svg.line()
// assign the X function to plot our line as we wish
.x(function(d,i) {
//console.log(d);
//console.log('Plotting X value for data point to be at: ' + d.created_at + ' using our xScale.');
return x(d.created_at);
})
.y(function(d) {
//console.log('Plotting Y value for data point to be at:' + d.rankings[0][1] + " using our yScale.");
return y(d.rankings[1][1]);
})
var line3 = d3.svg.line()
// assign the X function to plot our line as we wish
.x(function(d,i) {
//console.log(d);
//console.log('Plotting X value for data point to be at: ' + d.created_at + ' using our xScale.');
return x(d.created_at);
})
.y(function(d) {
//console.log('Plotting Y value for data point to be at:' + d.rankings[0][1] + " using our yScale.");
return y(d.rankings[2][1]);
})
// Add an SVG element with the desired dimensions and margin.
var graph = d3.select("#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// create yAxis
// var xAxis = d3.svg.axis().scale(x);//.ticks(-h).orient("bottom");//tickSize(-h).tickSubdivide(true);
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));
//collect all the rankings
color.domain(d3.keys(json[0]).filter(function(key) { return key !== "date"; }));
// Add the x-axis.
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis)
.selectAll("text")
.attr("class","text-anchor")
.attr("dx", "-2.48em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-65)"
});
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y).ticks(9).orient("left");
// Add the y-axis to the left
graph.append("svg:g")
.attr("class", "y axis")
.call(yAxisLeft);
// Add the line by appending an svg:path element with the data line we created above
// do this AFTER the axes above so that the line is above the tick-lines
graph.append("svg:path").attr("d", line(json))
.append("svg:g")
.append("text")
.attr("x", 10)
.attr("y",10)
.text("text");
graph.append("svg:path").attr("d", line2(json)).style("stroke", "green");
graph.append("svg:path").attr("d", line3(json)).style("stroke", "red");
</script>
</body>
</html>
我试图在每一行的末尾以与here相同的方式获得标签，但它似乎不起作用，我有这些部分假设要绘制文本但是它不起作用：
graph.append("svg:path").attr("d", line(json))
.append("svg:g")
.append("text")
.attr("x", 10)
.attr("y",10)
.text("text");
答案 0 :(得分：1)
查看this Gist (demo code)，其中显示使用svg:textPath标记路径。该示例显示了一个通用的弯曲路径，但它应该很容易应用于您的线元素。
答案 1 :(得分：1)
我接受@Alex的回答是为了在路径上写文字但是
您显示的示例是一个多线图，它在末尾逐行绘制线条和文本。
同样，您尝试逐个手动包含行。在这种情况下，您需要在绘制每一行后逐个添加文本。
graph.append("svg:path").attr("d", line(json))
.append("svg:g")
.append("text")
.attr("x", 10)
.attr("y",10)
.text("text");
这不会在最后附加文本......而是尝试这样的事情
graph.append("svg:path").attr("d", line2(json)).style("stroke", "green");
graph.append("text")
.datum(function(d) { return {value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.xvalue) + "," + y(d.value.yvalue) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text("Text");
我会解释你到底做了什么......
.datum(function(d) { return {value: d.values[d.values.length - 1]}; })
我将返回最后一个点（x，y）值..这会根据您的json格式而改变。 这里（值）是我的关键..
.attr("transform", function(d) { return "translate(" + x(d.value.xvalue) + "," + y(d.value.yvalue) + ")"; })
它将文本转换为最后一个（x，y）值...它为您提供了在路径末尾附加文本所需的输出（行）
希望它有帮助！
这是根据你的json的代码。它可以检查出来
linesGroup.append("text")
.datum(function(d) {return linedata.points[0] ; })
.attr("transform", function(d) {console.log(d);console.log("translate(" + x(d.created_at) + "," + y(d.rate) + ")"); return "translate(" + x(d.created_at) + "," + y(d.rate) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d){return (d.tag);});
};