Тики оси не отображаются на моем графике d3 - PullRequest
Новая
       33

Тики оси не отображаются на моем графике d3

0 голосов
/ 27 января 2020

Я новичок d3 ie, я прочитал данные из CSV-файла и смог нарисовать столбцы и нарисовать ось, но галочки не отображаются на оси, я искал много уроков, но ничего не помогло , вот мой код Любая помощь приветствуется. Я использую d3 v5. Я читаю данные из CSV-файла, добавляю svg в контейнер div, создаю прямоугольник для каждой точки данных в виде столбца, добавляю ось Y и ось X к графику. Я хочу, чтобы отметки оси Y представляли один столбец файла CSV, но они не отображаются, я даже попытался фиксированный массив в домене оси Y (0-100), но также не появился, я попытался сместить ось Y к осталось немного, но не сработало. 

<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
</head>

<style>
div#container {
  width: 1050px;
  height: 600px;
  margin: auto;

}
svg {
  width: 100%;
  height: 100%;
}

</style>
<body>
<div id="container" class="svg-container">
</div>
<script>

//------------------------SVG PREPARATION------------------------//
const margin = 80;

var adj = 0;
const svgwidth = 1050;
const svgheight = 600;
const width = 1050 - 2 * margin;
const height = 600 - 2 * margin;

// we are appending SVG first
var svg = d3.select("div#container").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.style("padding", 5)
.style("margin", 5)
.classed("svg-content", true);

//-----------------------DATA PREPARATION------------------------//
var total=[];
var years = [];
var dataset = d3.csv("test.csv");
dataset.then(function(data) {
    data.map(function(d) {
            d.running_total = +d.running_total;
            total.push(d.running_total);
            years.push(d.year);
            return d;});
});

//---------------------------BAR CHART---------------------------//

dataset.then(function(data) {  
     svg.selectAll("div")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", function (d, i) {
        for (i>0; i < data.length; i++) {
            return i * 21;
        }
    })
    .attr("y", function (d) {
        return height - (d.running_total*0.08);
    })
    .attr("width", 20)
    .attr("height", function (d) {
        return d.running_total*0.08;
    })
    .style("fill", "teal")
});

const yScale = d3.scaleLinear()
.range([0, height])
.domain([d3.min(total), d3.max(total)]);

svg.append('g')
.attr("class", "y axis")
.attr("transform", "translate(50,0)")
.call(d3.axisLeft(yScale).ticks(20));

</script>
...