[英]D3 V4 - Trying to Chart a Simple line Graph
我正在努力在D3(V4)中繪制簡單的折線圖...
我的數據如下所示,我相信它很好,因為我可以使用d3.timeParse()來解析日期,並且它們console.log很好:
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
資料格式
$myObj = (object)[];
$myObj->name = $row['CH_FREQ'];
$myObj->value = $row['RX_POWER'];
$myObj->date = $row['CREATED_AT'];
$chartData_RX_Down[] = $myObj;
例如:日期,名稱,值-可能是:2017-03-22 12:20:02,名稱,-0.2
大多數日期均為負數。
圖表代碼:
// SA MAC Plot Chart - API Doco: http://devdocs.io/d3~4/
function plotChart(data) {
$('#chartContainer').empty();
// Color Scale
var magma = d3.scaleSequential(d3.interpolateMagma).domain([0,7]);
// Set the Dimensions and Margins of the Graph
var margin = {top: 20, right: 20, bottom: 40, left: 60},
width = 580,
height = 230;
// x-Scale with Time Width
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S"); // D3 Expected Date Format
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return parseDate(d.date); }))
.range([0, width]);
// y-Scale
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.value; })])
.range([height, 0]);
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#chartContainer").append("svg")
.attr("width", "100%")
.attr("height", "300px")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// append the rectangles for the bar chart
svg.selectAll("path")
.data(data)
.enter().append("path")
.attr("x", function(d) { return d.date; })
.attr("y", function(d) { return d.value; });
// X-Axis
svg.append("g")
.attr("class", "axis_x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickPadding(5).tickSize(10));
// Y-Axis
svg.append("g")
.attr("class", "axis_y")
.call(d3.axisLeft(y).ticks(5).tickPadding(5).tickSize(10));
// X-Axis Text
svg.append("text")
.attr("class", "d3_X_Axis_Text")
.attr("x", 0)
.attr("y", 0)
.attr("fill", "white")
.attr("transform", "translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("Date Time");
// Y-Axis Text
svg.append("text")
.attr("class", "d3_Y_Axis_Text")
.attr("x", -130)
.attr("y", -42.5)
.attr("fill", "white")
.attr("transform", "rotate(-90)")
.style("text-anchor", "middle")
.text("CM DownStream Bytes Received");
}
我在屏幕上得到一個帶有日期X軸和數字0到-6 Y軸的圖表,因此D3正在工作並試圖顯示圖表-我只是看不到任何數據/線。
注意:我正在尋找折線圖。
我認為問題與以下代碼有關:
// append the rectangles for the bar chart
svg.selectAll("path")
.data(data)
.enter().append("path")
.attr("x", function(d) { return d.date; })
.attr("y", function(d) { return d.value; });
我也嘗試了以下方法:
// append the rectangles for the bar chart
svg.selectAll("path")
.data(data)
.enter().append("path")
.attr("x", function(d) { return d.date; })
.attr("y", function(d) { return d.value; });
任何幫助將不勝感激!
干杯亞當
SVG路徑元素沒有x和y屬性。 您應該配置其d屬性(路徑描述)。 這里指- developer.mozilla.org/en-US/docs/Web/SVG/Element/path
碼:
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
svg.selectAll("path")
.data(data)
.enter().append("path")
.attr("class", "line")
.attr("d", valueline);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.