D3线图没有显示任何东西

我想用D3显示一些页面上的数据，但没有显示，你有什么错误的代码这是什么错误？需要注意的是铬合金控制台没有显示任何错误...D3线图没有显示任何东西

function line_chart(data, id){ 
var vis = d3.select(id), 
WIDTH = 400, 
HEIGHT = 250, 
MARGINS = { 
    top: 20, 
    right: 20, 
    bottom: 20, 
    left: 50 
}, 

xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([1919, 2016]), //todo 
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, 100]), 
xAxis = d3.svg.axis() 
    .scale(xScale), 
yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left"); 

vis.append("svg:g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
    .call(xAxis); 
vis.append("svg:g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
    .call(yAxis); 
var lineGen = d3.svg.line() 
    .x(function(d) { 
     return xScale(d.year); 
    }) 
    .y(function(d) { 
     return yScale(d.pts); 
    }) 
    .interpolate("basis"); 
vis.append('svg:path') 
    .attr('d', lineGen(data)) 
    .attr('stroke', 'green') 
    .attr('stroke-width', 2) 
    .attr('fill', 'none'); 
} 

line_chart(data, '#elementid'); 

var data = [{"pts": "45", "year": 1929}, {"pts": "45", "year": 1929}, {"pts": "55", "year": 1930}, {"pts": "55", "year": 1930}, {"pts": "54", "year": 1931}, {"pts": "54", "year": 1931}]

其实数据是长一点，但它只是给你的东西去努力......

哦，我差点忘了，这里的CSS：

.axis path { 
fill: none; 
stroke: #777; 
shape-rendering: crispEdges; 
} 
.axis text { 
    font-family: Lato; 
    font-size: 13px; 
}

谢谢你的建议。

来源

2016-01-23 Vinz29

你不显示你的HTML，但我假设'elementid'是SVG元件？如果没有，你永远不会创建一个SVG节点。如果是这样，你的[代码适用于我]（http://plnkr.co/edit/v8z7BAarKoY0BmX1hJME?p=preview）。 – Mark

你说得对，那是XD的缺失部分 – Vinz29

我忘了SVG图像添加到HTML，代码的第二行应该是var vis = d3.select(id).append('svg')代替var vis = d3.select(id)

来源

2016-01-24 00:38:27 Vinz29

D3线图没有显示任何东西

回答

相关问题