d3 - 为x轴创建标签时出现问题

现在我正在使用D3 v4来尝试创建一个简单的折线图，其中包含x轴的标签。我不确定如何正确生成标签。d3 - 为x轴创建标签时出现问题

这里是我的要点是：https://gist.github.com/pebblexe/0fa48e4b10426ccf3d339b9e9060e727

另外一个人如何去制作与https://bl.ocks.org工作的要点？

谢谢你的时间和耐心回答这个问题。

2017-01-16 pebblexe

我很困惑你想要在x轴上使用什么样的比例。现在你正在使用scaleTime，这是没有意义的，因为你的x值是而不是日期或时间。然后你的选择是scaleLinear（如果你的所有值都是numeric and continuous--这似乎是你在解析函数中试图做的）。但我真的认为scaleOrdinal更适合您的数据（尤其是scalePoint）。

完全跑步代码：

<!DOCTYPE html> 
 

 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<div id="chart0"></div> 
 
<script> 
 
    var data = { 
 
    "studyGuide": { 
 
     "count": 20, 
 
     "avgTime": "4 minutes and 32 seconds", 
 
     "unitCount": [{ 
 
     "name": "welcome", 
 
     "count": 3 
 
     }, { 
 
     "name": "1", 
 
     "count": 10 
 
     }, { 
 
     "name": "2", 
 
     "count": 5 
 
     }, { 
 
     "name": "3", 
 
     "count": 12 
 
     }, { 
 
     "name": "4", 
 
     "count": 15 
 
     }, { 
 
     "name": "5", 
 
     "count": 2 
 
     }, { 
 
     "name": "6", 
 
     "count": 7 
 
     }] 
 
    } 
 
    }; 
 

 
    var dataParsed = data['studyGuide']['unitCount']; 
 

 
    // set the dimensions and margins of the graph 
 
    var margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 50 
 
    }, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
    // set the ranges 
 
    var x = d3.scalePoint().range([0, width]); 
 
    var y = d3.scaleLinear().range([height, 0]); 
 

 
    // define the line 
 
    var valueline = d3.line() 
 
    .x(function(d) { 
 
     return x(d.name); 
 
    }) 
 
    .y(function(d) { 
 
     return y(d.count); 
 
    }); 
 

 
    // append the svg obgect to the body of the page 
 
    // appends a 'group' element to 'svg' 
 
    // moves the 'group' element to the top left margin 
 
    var svg = d3.select("#chart0").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 + ")"); 
 

 

 
    // format the data 
 
    dataParsed.forEach(function(d) { 
 
    d.count = +d.count; 
 
    }); 
 

 
    console.log("dataParsed", dataParsed); 
 

 
    // Scale the range of the data 
 
    x.domain(dataParsed.map(d => d.name)); 
 
    y.domain([0, d3.max(dataParsed, function(d) { 
 
    return d.count; 
 
    })]); 
 

 
    // Add the valueline path. 
 
    svg.append("path") 
 
    .data([dataParsed]) 
 
    .attr("class", "line") 
 
    .attr("d", valueline) 
 
    .style("fill", "none") 
 
    .style("stroke", "steelblue") 
 
    .style("stroke-width", "2px"); 
 

 
    // Add the X Axis 
 
    svg.append("g") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.axisBottom(x)); 
 

 
    // Add the Y Axis 
 
    svg.append("g") 
 
    .call(d3.axisLeft(y)); 
 
</script>

要解决你的块的问题，你需要的基本HTML文件命名为的index.html，这里是你的代码作为要点：https://bl.ocks.org/larsenmtl/93cb0b5a5201d63e679826877406b606

来源

2017-01-16 22:07:35 Mark

谢谢！这确实是我的问题。也感谢你解释bl.ocks.org的工作原理。 – pebblexe

@pebblexe，如果这可以解决您的问题，请记住检查我的答案旁边的“复选标记”。这将标记完整的问题并改进'd3.js'答案统计。 – Mark

对不起，我不好，我忘了。 – pebblexe

d3 - 为x轴创建标签时出现问题

回答

相关问题