多线图D3.js Json数据结构

Question

我正在尝试修改this fiddle

在哪里而不是这个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]);