d3 - проблема с созданием меток для оси x

Сейчас я использую D3 v4, чтобы попытаться создать простую линейную диаграмму с метками для оси x. Я не уверен, как правильно создавать ярлыки.d3 - проблема с созданием меток для оси x

Вот моя суть: https://gist.github.com/pebblexe/0fa48e4b10426ccf3d339b9e9060e727

Кроме того, как можно идти о создании сути, которая работает с https://bl.ocks.org?

Благодарим вас за ваше время и терпение, отвечая на этот вопрос.

источник

2017-01-16 pebblexe

Я смущен тем, какой масштаб вы хотите на этой оси х. Прямо сейчас вы используете 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

ответ

Смежные вопросы