0
GitHub에 표시된 대화 형 스트림 그래프를 웹 서비스에서 가져 오는 데이터로 다시 작성하려고합니다. 그래프를 생성하기 위해 GitHub의 샘플에서 같은 코드를 사용하고 있지만 Path 요소 (정확하게는 d 속성)에 대해 MNaN과 NaN 좌표를 얻고 있습니다. 결과는 x 축과 y 축만 그려지는 빈 그래프이지만 아무것도 표시하지 않습니다.d3.js 스트림 그래프의 MNaN 및 NaN 좌표
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public PoliticianWords[] ComparePoliticians()
{
List<PoliticianWords> ret = new List<PoliticianWords>();
Random r = new Random();
string[] politicians = { "A B", "C D", "E F", "G H" };
Random gen = new Random();
List<DateTime> dates = new List<DateTime>();
for (int i = 0; i < 20; i++)
{
DateTime start = new DateTime(1991, 9, 11);
int range = (DateTime.Today - start).Days;
dates.Add(start.AddDays(gen.Next(range)));
}
dates.Sort();
foreach (string politician in politicians)
{
foreach(DateTime d in dates)
{
PoliticianWords pw = new PoliticianWords();
pw.key = politician;
pw.value = gen.Next(0, 100);
pw.date = d.Day.ToString() + "/" + d.Month.ToString() + "/" + d.Year.ToString();
ret.Add(pw);
}
}
return ret.ToArray();
}
편집 : 1 :
의 편의를 위해<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.chart {
background: #fff;
}
p {
font: 12px helvetica;
}
.axis path, .axis line {
fill: none;
stroke: #000;
stroke-width: 2px;
shape-rendering: crispEdges;
}
button {
position: absolute;
right: 50px;
top: 10px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="chart"></div>
</body>
<script>
var dataset;
function getData() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "VoxPoliticoService.asmx/ComparePoliticians",
data: {},
dataType: "json",
success: function (res) {
dataset = res.d;
renderChart();
}
});
}
jQuery(document).ready(function ($) {
getData();
});
function renderChart()
{
color = "blue";
var datearray = [];
var colorrange = [];
var data = dataset;
if (color == "blue") {
colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
strokecolor = colorrange[0];
var format = d3.time.format("%m/%d/%y");
var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var tooltip = d3.select("body")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", "30px")
.style("left", "55px");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-10, 0]);
var z = d3.scale.ordinal()
.range(colorrange);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.weeks);
var yAxis = d3.svg.axis()
.scale(y);
var yAxisr = d3.svg.axis()
.scale(y);
var stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(".chart").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 + ")");
data.forEach(function(d) {
d.date = format.parse(d.date);
d.value = +d.value;
});
var layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxis.orient("right"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis.orient("left"));
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
svg.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
})})
.on("mousemove", function(d, i) {
mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getMonth() + invertedx.getDate();
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
datearray[k] = selected[k].date
datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
}
mousedate = datearray.indexOf(invertedx);
pro = d.values[mousedate].value;
d3.select(this)
.classed("hover", true)
.attr("stroke", strokecolor)
.attr("stroke-width", "0.5px"),
tooltip.html("<p>" + d.key + "<br>" + pro + "</p>").style("visibility", "visible");
})
.on("mouseout", function(d, i) {
svg.selectAll(".layer")
.transition()
.duration(250)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke-width", "0px"), tooltip.html("<p>" + d.key + "<br>" + pro + "</p>").style("visibility", "hidden");
})
var vertical = d3.select(".chart")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "380px")
.style("top", "10px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");
d3.select(".chart")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px")})
.on("mouseover", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 5;
vertical.style("left", mousex + "px")});
}
</script>
, 여기에 데이터 세트를 생성 (C#에서) 웹 서비스의 코드는 내가 데이터 세트의 구성원 등의 정의를 추가하는 것을 잊었다 C# 클래스. 이 질문은 이미 다른 질문의 더미에서 분실되었을 수 있습니다 알고 있지만 도움은 여전히 많이 주시면 감사하겠습니다 :
public class PoliticianWords
{
public string key { get; set; }
public int value { get; set; }
public string date { get; set; }
}
편집 2 : 내가 일하게 될 밝혀졌다 예를 들어 데이터 세트를 내놓았다. 웹 서비스에서 무작위로 생성하는 대신, .csv 파일에 저장하고 GitHub에 제공된 코드와 유사하게 가져옵니다.
키 값, 날짜 AB, 100,01/08/13 AB, 15,01/09/13 AB, 35,01/13분의 10 AB, 38,01/11/13 AB, 22,01/12/13 AB, 16,01/13/13 CD, 35,01/08/13 CD, 36,01/09/13 CD, 37,01/10/CD, 26,01/13/13 EF, 21,01/08/13 EF, 25,01/09/13 EF, 27,01/10/13 EF, 23,01/11/13 EF, 2 4,01/12/13 EF, 21,01/13/13 GH, 10,01/08/13 GH, 15,01/09/13 GH, 35,01/10/13 GH, 38,01/13분의 11 GH, 22,01/13분의 12 GH 여기 16,01/13분의 13
하고, 또한로부터 얻어진 무작위로 생성 된 데이터 세트 이외의 동작 예이며 웹 서비스 :
키 값, 날짜 AB, 1,6-/1,992분의 5 AB, 4,11/1,992분의 29 AB/1천9백93분의 3 2,11 B, 7,8/1/1995 AB, 9,8/1/1996 AB, 15,8/1/1997 CD, 1,6/5/1992 C D, 2 , 1999 년 11 월 29 일 CD, 5,11/3/1993 CD, 10,8/1/1995 CD, 12,8/1/1996 C D, 19,8/1/1997 EF, 1,6/5/1992 EF, 20,11/29/1992 EF, 16,11/3/1993 E F, 6,8/1/1995 EF, 10,8/1/1996 EF, 5,8/1/1997 GH, 16,11/3/1993 GH, 6,8/1/1995 GH, 10,8/1/1996 G H, 17,11/29/1992 GH, , 20,8/1/1997
완전하고 간단한 예제를 제공해 주시겠습니까? 그것은 많은 코드이고 에러는 아마 작은 것에 의한 것 같습니다. –
@ LarsKotthoff 완료. 오프닝 포스트의 하단에는 작동중인 및 작동하지 않는 예제가 있습니다. 테스트하려면 .csv 파일에 저장할 수 있습니다. d3 코드는 GitHub의 예제와 동일한 코드를 사용하면 해당 코드를 가져옵니다. – Deniz