Question

我无法在D3中传递整个数组值。只有前两个数组值出现在Y轴上。它在此页面上显示：https://digitalxlabs.com/d3-charts/rectangle-transition-part1.php

用户名：DXLdemo 密码：查看@ 098＃

以下是我正在使用的示例代码：

               var ydata = [{"val":"0-9"}, {"val":"20-29"}, {"val":"40-49"}, {"val":"60-69"}, {"val":"80-89"},  {"val":"100+"}];
      //add x and y axis
               var x = d3.scale.linear()
                    .range([0, 720]);

                var y = d3.scale.ordinal()
                    .range([180, 0]);

                /*y.domain().tickvalues*/


                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom")
                    .ticks(5)
                    .tickFormat(function(d) { return d + "%"; });


                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .ticks(6)
                    .tickValues(ydata.map(function(d){return d.val;}));

                /*yAxis.tickValues([0-9,20-29,40-49,60-69,80-89,100]);*/
                /*yAxis.tickValues(ydata.map(function(d) { return d.val; }));*/

                x.domain([0,25]);
                /*y.domain(ydata.map(function (d) {return d.val; }));   */
                /*y.domain([10,100]);*/ 
                    /*.tickFormat(function(d,i){return d.ydat[i]});*/
/*                y.domain([]);*/

Answer 1

以下是d3比例https://github.com/mbostock/d3/wiki/Ordinal-Scales的文档。

你不能只写：

var y = d3.scale.ordinal().range([180, 0]);

您必须指定域名。如果您传递间隔，也可以使用rangePoints。

尝试这样的事情：

var y = d3.scale.ordinal().domain(ydata.map(function(d){return d.val;})).rangePoints([180, 0]);

Answer 2

不需要删除'x.domain（[0,25]）'。并添加'y.domain（[0,150]）'。您尚未将域设置为y轴。 domain是指Y轴的最小值和最大值。

无法在D3中的YAxis上传递数组值

2 个答案: