Question

我有一个d3图表如下。

HTML：

<svg></svg>

JS：

var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 960,
height = 500;

var startOfWeek = moment().startOf("week").toDate();
var endOfWeek = moment().endOf("week").toDate();

var dxSyncEvents = [];
var now = moment();

var times = [];
var sites = [];

/*
Some stuff that pushes JS Date objects onto times[] and strings onto sites[]
*/

var xScale = d3.time.scale().domain([startOfWeek, endOfWeek]).range([0, 960]);
var yScale = d3.scale.ordinal().domain(sites).rangePoints(500, 10);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .ticks(d3.time.hours, 12)
    .tickFormat(d3.time.format('%H:%M'))
    .tickSize(8)
    .tickPadding(8);
var yAxis = d3.svg.axis().scale(yScale).orient("left");

d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .selectAll("circle")
    .data(times)
    .enter().append("circle")
    .attr("r", "10px")
    .attr("fill", "black")
    .attr("cx", xScale)
    .attr("cy", yScale)
    .call(xAxis)
    .call(yAxis);

为什么我在图表上没有任何轴？无法在屏幕上看到它们，也无法在开发人员工具中的DOM中看到它们。不过，我确实看到了一些圈子。

有一些控制台错误没有提供太多帮助：

Error: Invalid value for <path> attribute d="M-6,undefinedH0VundefinedH-6" 
Error: Invalid value for <g> attribute transform="translate(0,NaN)" (twice)

Answer 1

您似乎在xAxis调用的结果上调用了yAxis和.enter().append("circle")个对象，这会为每个新内容创建一个circle元素times中的数据元素。

我怀疑那不是你想要的。您可能希望为每个轴附加g元素，并对其执行.call(xAxis)和.call(yAxis)。

http://bl.ocks.org/mbostock/3883245是一个简单的折线图，可能有所帮助。

为什么这个d3图表上没有显示x或y轴？

1 个答案: