Question

我有一个使用d3.js创建的散点图，我试图添加一个x轴，其范围从上午12点到上午12点，即跨越24小时。图表的性质是数据会根据用户输入而改变，但是我仍然会收到相同的错误，但是我尝试追加轴。

我收到错误： d3.v4.min.js：2错误：属性转换：预期数量，＆＃34;翻译（NaN时，0）＆＃34;

这是我的代码，我试图仅包含对我的查询很重要的代码。（timeLog是我的数据数组）

var parseTime = d3.utcParse("%H:%M");
var midnight = parseTime("00:00");
var height = $("#scatter").height();
var width = $("#scatter").width();

var max = Math.max(timeLog);
var min = Math.min(timeLog);

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

var xScale = d3.scaleBand()
 .domain(d3.range(0,timeLog.length))
 .range([0,width]);

d3.select("#scatter").append('svg')
    .attr('width',width)
    .attr('height',height)
    .style('background', '#f4f4f4')
    .selectAll('circle')
        .data(timeLog)
        .enter().append('circle')
        .style('fill', 'black')
        .style('stroke','none')
        .attr('cx',function(d, i){
            return xScale(i);
            })
        .attr('cy',function(d){
            return height - yScale(d);
        })
        .attr('r',2);

var hScale = d3.scaleUtc()
 .domain([midnight,d3.time.day.offset(midnight,1)])
 .range([0,width]);

var xAxis = d3.axisBottom()
 .scale(hScale)
 .tickFormat(d3.time.format.utc("%I %p"))

var xGuide = d3.select('svg')
 .append('g')
  .attr("class", "axis axis--x")
    xAxis(xGuide)
    xGuide.attr('transform','translate(0,' + height + ')')
    xGuide.selectAll('path')
        .style('fill','black')
        .style('stroke','black')
    xGuide.selectAll('line')
        .style('stroke','black')

我是d3.js的新手，并且我正在尝试自学基础知识，所以任何有助于我找出错误原因的反馈都会非常感激。

修改在发现我的一些语法过时并更新了上面的代码后，我做了一些更改，我现在没有收到任何错误消息，但是轴仍然没有显示。是否有一些我遗漏的属性？感谢您的任何反馈。

d3.js时间刻度轴

0 个答案: