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

Multi line chart D3.js Json data structure

本文关键字：Json 数据结构 js D3 折线图更新时间：2023-09-26

我正在尝试修改这个小提琴

where in代替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。或者任何传递数据的方式

时间标度不适合域

使用序数刻度

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

代替时间刻度

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