Как создать линейный график D3 с двумя разными данными - PullRequest
Новая
       21

Как создать линейный график D3 с двумя разными данными

0 голосов
/ 22 июня 2019

Я остановился на долгосрочном графике D3 ниже критериев, но я не охвачен ниже, пожалуйста, кто-нибудь, помогите.

Критерии приемки 1:

Из предоставленных данных нарисуйте линейный график зависимости процента от категории. Диаграмма должна иметь горизонтальную и вертикальную линию, которая указывает местоположение данных на диаграмме с помощью круга. Диаграмма должна поддерживать точечную привязку (горизонтальная и вертикальная линии должны указывать на одну и самую близкую точку данных), когда мышь перемещается вокруг области диаграммы.

Критерии приемки 2:

В нижней части графика должна быть сводная линейная диаграмма (маленькая линейная диаграмма без оси). Эта сводная линейная диаграмма должна фильтровать исходную диаграмму с помощью выбора диапазона с помощью перетаскивания мышью. Выбранный диапазон окрашен в серый цвет, а приведенная выше диаграмма отфильтрована по осям y и x.

Критерии приемки 3:

Оси категорий сортируются в порядке возрастания. Два пользователя, имеющие одну и ту же категорию, должны быть объединены, и их имена должны отображаться через запятую ','). Ось значения процента колеблется от 0 до 100% и основана на доле от общего значения для всех категорий.

Данные JSON:

[{"user": "Rm6vnmNPRvz", "value": 11, "category": 7}, {"user": "cB0hC", "value": 9, "category": 7}, {" user ":" xFapEXx9 "," value ": 12," category ": 9}, {" user ":" stHdo1TV "," value ": 6," category ": 10}, {" user ":" NlUafWkpjduC3 " , "значение": 10, "категория": 7}, {"пользователь": "e7DwVrmJ", "значение": 7, "категория": 6}, {"пользователь": "uEOJsO", "значение": 6 , "category": 14}, {"user": "zlTNlewuDKcRl", "value": 13, "category": 8}, {"user": "BQlhXiIHXUo42I", "value": 12, "category": 14 }, {"пользователь": "SO6lM", "значение": 5, "категория": 5}, {"пользователь": "kn3LTrlFv6", "значение": 5, "категория": 11}, {"пользователь" : "rFKwr3vSxco3K7", "value": 7, "category": 9}, {"user": "1gzvu", "value": 11, "category": 14}, {"user": "BL ymOGU", "значение": 13, "категория": 10}, {"пользователь": "vwEH33kh8 Bhny", "значение": 6, "категория": 5}];

класс d3Chart расширяет React.Component { конструктор (реквизит) { супер (реквизит) this.state = {data: ''} } 

componentDidMount(){
    this.draw()
}


draw(){

    const svg = d3.select("svg"),
        margin = {top: 50, right: 20, bottom: 50, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    const x = d3.scaleLinear()
        .rangeRound([0,width]);

    const y = d3.scaleLinear()
        .rangeRound([height, 0]);
    const make_x_grid_lines = () =>{
            return d3.axisBottom(x)
                .ticks(10)
        }
    //
    const make_y_gridlines = () => {
            return d3.axisLeft(y)
                .ticks(10)
        }

    const lineCount = d3.line()
        .x(function(d) { return x(d.value); })
        .y(function(d) { return y(d.category); });


        x.domain(d3.extent(data, function(d) {return d.value; }));
        y.domain(d3.extent(data, function(d) { return d.category; }));
        // // add the X gridlines
        g.append("g")
          .attr("class", `grid`)
          .attr("transform", "translate(0," + height + ")")
          .call(make_x_grid_lines()
              .tickSize(-height)
              .tickFormat(""))
       // add the Y gridlines
        g.append("g")
        .attr("class", `grid`)
        .call(make_y_gridlines()
          .tickSize(-width)
          .tickFormat(""))

          //plot the x axis
        g.append("g")
            .attr("class", `axis axis--x`)
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        g.append("g")
            .attr("class", 'axis axis--y')
            .call(d3.axisLeft(y))
        //plot the color legend
        .append("text")
            .attr("fill", "#000")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .style("text-anchor", "end")
            .style('font-size','12')
            .text("New Users");
        g.append('g')
            .attr('class', 'legend')
        .append('text')
            .attr('y',-10)
            .attr('x',width-100)
            .text('Users');
        g.append('g')
            .append('rect')
            .attr('y',-23)
            .attr('x',width-55)
            .attr('width',18)
            .attr('height',18)
            .attr('fill','steelblue');

    //plot the x axis legend
        svg.append("text")
            .attr("transform","translate(" + (width/2) + " ," + (height + margin.top + 40) + ")")
            .style("text-anchor", "middle")
            .text("Week #");

        g.append("path")
            .datum(data)
            .attr("class", `lineUsers`)
            .attr("d", lineCount)

}


render(){

    return (
        <div className="chart" >
            <h3>Line Chart</h3>
            <svg width="960" height="500" style={{border:'solid 1px #eee',borderBottom:'solid 1px #ccc'}} />
        </div>
    )
}
* *} Тысяча двадцать-один
...