Javascript D3V4-尝试绘制简单的折线图
我正在努力在D3(V4)中绘制一个简单的折线图 我的数据如下所示,我相信这很好,因为我可以使用d3.timeParse()解析日期,它们是console.log fine:Javascript D3V4-尝试绘制简单的折线图,javascript,d3.js,charts,Javascript,D3.js,Charts,我正在努力在D3(V4)中绘制一个简单的折线图 我的数据如下所示,我相信这很好,因为我可以使用d3.timeParse()解析日期,它们是console.log fine: var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S"); 数据格式 $myObj = (object)[]; $myObj->name = $row['CH_FREQ']; $myObj->val
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; });
任何帮助都将不胜感激
干杯
AdamSVG路径元素没有x和y属性。您应该配置它的d属性(路径描述)。 请参阅此处- 代码:
SVG路径元素没有x和y属性。您应该配置它的d属性(路径描述)。 请参阅此处- 代码:
SVG路径元素没有x和y属性。配置其d属性(路径描述)。请参阅此处-SVG路径元素没有x和y属性。配置其d属性(路径描述)。参考这里-
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);