在D3.js中创建带有有序缩放的文本标记的x轴 [英] Creating a Text Labeled x-Axis with an Ordinal Scale in D3.js

问题描述

我在d3.js中创建一个带有序数x轴的条形图，其刻度应该用文本标记图表。任何人都可以解释如何顺序量表映射x刻度到相应的柱位置？具体来说，如果我想将一个文本值数组的x tick标签指定到条形图中的相应栏。

目前我设置域如下：

  var labels = [a，b，c d，e，f，g，h，i，j，k，l，m，n，o， ，q，r，s，t]; 
 var xScale = d3.scale.ordinal（）
 .domain（labels）
  

正如这个小提琴所示：

http://jsfiddle.net/chartguy/FbqjD/

关联的小提琴源代码：

  // width and height 
 var margin = {top：20，right：20，bottom：30，left：40}; 
 var width = 600  -  margin.left  -  margin.right; 
 var height = 500-margin.top -margin.bottom; 
 var w = width; 
 var h = height; 
 
 
 var dataset = [5，10，13，19，21，25，22，18，15，13，
 11，12，15，20，18， 17，16，18，23，25]; 
 
 var labels = [a，b，c，d，e，f，g，h，i，j ，k，l，m，n，o，p，q，r，s，t 
 var xScale = d3.scale.ordinal（）
 .domain（labels）
 .rangeRoundBands（[margin.left，width]，0.05）; 
 var xAxis = d3.svg.axis（）。scale（xScale）.orient（bottom）; 
 
 
 var yScale = d3.scale.linear（）
 .domain（[0，d3.max（dataset）]）
 .range（[h， 0]）; 
 
 
 //创建SVG元素
 var svg = d3.select（body）
 .append（svg）
 .attr width，w）
 .attr（height，h）; 
 
 //创建条形图
 svg.selectAll（rect）
 .data（dataset）
 .enter（）
 .append ）
 .attr（x，function（d，i）{
 return xScale（i）; 
}）
 .attr ）{
 return yScale（d）; 
}）
 .attr（width，xScale.rangeBand（））
 .attr（height，function {
 return h  -  yScale（d）; 
}）
 .attr（fill，function（d）{
 returnrgb（0，0，0） ; 
}）; 
 
 svg.append（g）
 .attr（class，x axis）
 .attr（transform 0 +））
 .call（xAxis）; 
 
 //创建标签
 svg.selectAll（text）
 .data（dataset）
 .enter（）
 .append ）
 .text（function（d）{
 return d; 
}）
 .attr（x，function（d，i）{
 return xScale（i）+ xScale.rangeBand（）/ 2; 
}）
 .attr（y，function（d）{
 return h  -  yScale（d）+ 14; 
}）; 
  

解决方案

您可以显式设置顺序轴的节拍值使用 d3.svg.axis（）。tickValues（* array *）。

做它，因为它危险地分离你的键和值，这意味着你必须小心手动对齐秤，并确保您的数据正确对应。它有助于在单个对象中分组键和值，然后使用以下格式：

  axis.domain（array.map函数（d）{return d.value;}））
  

p>

我已经重做了你的数据，并且在我看到的更多 d3 way 。 （还要注意，我做了一些其他的改变只是为了好玩，即改善边距和清理轴对齐等）。

I'm building a bar chart in d3.js with an ordinal x-axis whose ticks should label the chart with text. Could anyone explain how the ordinal scale "maps" x ticks to the corresponding bar positions? Specifically, if I want to designate the x tick labels with an array of text values to the corresponding bars in a bar chart.

Currently I'm setting the domain as the following:

    var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
    var xScale = d3.scale.ordinal()
                .domain(labels)

However, values of 1-19 are showing after the text labels.

As seen in this fiddle:

http://jsfiddle.net/chartguy/FbqjD/

Associated Fiddle Source Code:

//Width and height
            var margin = {top: 20, right: 20, bottom: 30, left: 40};           
            var width = 600 - margin.left - margin.right;
            var height= 500-margin.top -margin.bottom;
            var w = width;
            var h = height;


            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

            var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
            var xScale = d3.scale.ordinal()
            .domain(labels)
                            .rangeRoundBands([margin.left, width], 0.05);
            var xAxis = d3.svg.axis().scale(xScale).orient("bottom");


            var yScale = d3.scale.linear()
                            .domain([0, d3.max(dataset)])
                            .range([h,0]);


            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Create bars
            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return xScale(i);
               })
               .attr("y", function(d) {
                    return yScale(d);
               })
               .attr("width", xScale.rangeBand())
               .attr("height", function(d) {
                    return h - yScale(d);
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, 0)";
               });

            svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + 0 + ")")
      .call(xAxis);

            //Create labels
            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
               .attr("x", function(d, i) {
                    return xScale(i) + xScale.rangeBand() / 2;
               })
               .attr("y", function(d) {
                    return h - yScale(d) + 14;
               });

解决方案

You can set the tick values of an ordinal axis explicitly using d3.svg.axis().tickValues(*array*).

But this is an odd way to do it because it dangerously separates your keys and values, meaning you have to take care to manually align the scales and make sure that your data corresponds correctly. It helps to group the keys and values in a single object and then use the format:

       axis.domain(array.map(function (d) { return d.value; }))

to map your axis domains.

I have reworked your data and fiddle to do it in what I see as the more d3 way. (Also note that I made some other changes just for fun, namely improved the margins and cleaned up the axis alignment, etc.)

这篇关于在D3.js中创建带有有序缩放的文本标记的x轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！