javascript - 多折线图D3.js Json数据结构

我正在尝试修改this小提琴

代替这个杰森

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的代码。或以任何方式处理数据

最佳答案

时间范围不适用于该域

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);