Блог

Главная - Вопросы по программированию - Метки категорий в столбчатой диаграмме частично скрыты

Метки категорий в столбчатой диаграмме частично скрыты

#d3.js

#d3.js

Вопрос:

У меня есть гистограмма, на которой метки отметок по оси x обрезаны в svg, и я, похоже, не могу найти подходящее действие, чтобы их отобразить. Я безуспешно пытался поиграть со .range() свойствами, связанными с переменной x, и мне интересно, следует ли мне добавить атрибут «transform» или, возможно, атрибут «margin-bottom» для решения проблемы. Есть какие-либо указания относительно того, что может быть причиной этой проблемы, и наилучшего решения?

 <html>
<!-- Load d3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<meta charset="utf-8">
<body>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
</body>
<script>

    var data = [
        { "x": "Friday", "y": 7.620000000000001 },
        { "x": "Monday", "y": 6.463333333333335 },
        { "x": "Saturday", "y": 7.236666666666666 },
        { "x": "Sunday", "y": 7.388571428571429 },
        { "x": "Thursday", "y": 8.051111111111112 },
        { "x": "Tuesday", "y": 7.717999999999999 },
        { "x": "Wednesday", "y": 7.742 }
    ]

    var margin = { top: 10, right: 30, bottom: 30, left: 60  }
    var width = 800 - margin.left - margin.right;
    var height = 800 - margin.top - margin.bottom;

    var svg = d3.select("#my_dataviz")
        .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   ")"); // translate(margin left, margin top)

    var x = d3.scaleBand()
        .domain(d3.max(data, function(d) { return d.x }))
        .range([0, width])
        .padding(0.2);
    
    svg.append("g")
        .attr("transform", "translate("   0   ","   height   ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");
            
       // Append x-scale title
    svg.append("text")             
        .attr("transform",
                "translate("   (width/2)   " ,"   (height   margin.top   20)   ")")
        .style("text-anchor", "middle")
        .text("Weekday");


</script>
</html>

Ответ №1:

Данные оси x следует использовать .map для получения …

 var x = d3.scaleBand()
        .domain(data.map(function(d) { return d.x; }))
        .range([0, width])
        .padding(0.2);

Комментарии:

1. Извините, я вижу, что вы были правы с ответом. Спасибо!