Question

我试图在带有D3的页面上显示一些数据，但没有显示任何内容，您是否知道此代码有什么问题？请注意，Chromes控制台未显示任何错误...

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;
}

谢谢你的建议。

Answer 1

我忘了将svg图片附加到HTML中，代码的第二行应该是var vis = d3.select(id).append('svg')而不是var vis = d3.select(id)

D3线图没有显示任何内容

1 个答案: