Question

我正在尝试修改this小提琴

而不是这个Json

var data = [{"symbol":"MSFT","date":"Day1","price":40},{"symbol":"MSFT","date":"Day2","price":23.18},{"symbol":"MSFT","date":"Day3","price":24.43}

数据我想传递这个Json格式{ "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "day8": 154, "lineName": "cars", }. { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "day8": 154, "lineName": "bikes", }, { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "day8": 154, "lineName": "planes", }

我是JS和D3.js的新手可以任何人给我一些关于锄头的提示或示例我可以修改它会接受上述Json的代码。或任何按摩数据的方式

Answer 1

时间刻度不适合域名

Use Ordinal scale

var domain = ["Day 1","Day 2", "Day 3","Day 4","Day 5","Day 6","Day 7"]; var xScale = d3.scale.ordinal() .domain(domain) .rangeRoundBands([0, width], .1); var xAxis = d3.svg.axis() .scale(xScale) .tickSize(0) .orient("bottom"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis);

Answer 2

而不是时间刻度

var x = d3.time.scale().domain(Array).range([0, width]);

使用序数比例

var ar = ["Day 1","Day 2", "Day 3","Day 4","Day 5","Day 6","Day 7"];
var x = d3.scale.ordinal()
    .domain(arr)
    .rangeBands([0, width]);

多线图D3.js Json数据结构

2 个答案: