Question

我尝试使用低于标准的长期D3折线图，但未涵盖以下几点，请帮助。

接受标准1：

从提供的数据中绘制百分比值与类别的折线图。图表应该有水平和垂直线，用圆圈精确指出图表上的数据位置。当鼠标在图表区域中移动时，图表应支持粘性精确定位（水平和垂直线必须精确定位在单个和最接近的数据点上）。

接受标准2：

在图表底部应有一个汇总折线图（无轴的小折线图）。该汇总折线图应使用鼠标拖动的范围选择来过滤原始图表。所选范围为灰色，并且上图在y和x轴上进行了过滤。

接受标准3：

类别轴应按升序排序。具有相同类别的两个用户将被合并，并且其名称应显示为逗号“，”）。百分比值轴的范围是0-100％，它基于所有类别的总值中的比例。

JSON数据：

[{“ user”：“ Rm6vnmNPRvz”，“ value”：11，“ category”：7}，{“ user”：“ cB0hC”，“ value”：9，9，“ category”：7}，{“用户”：“ xFapEXx9”，“值”：12，“类别”：9}，{“用户”：“ stHdo1TV”，“值”：6，“类别”：10}，{“用户”：“ NlUafWkpjduC3” ，“ value”：10，“ category”：7}，{“ user”：“ e7DwVrmJ”，“ value”：7，“ category”：6}，{“ user”：“ uEOJsO”，“ value”：6 ，“ category”：14}，{“ user”：“ zlTNlewuDKcRl”，“ value”：13，“ category”：8}，{“ user”：“ BQlhXiIHXUo42I”，“ value”：12，12，“ category”：14 }，{“ user”：“ SO6lM”，“ value”：5，“ category”：5}，{“ user”：“ kn3LTrlFv6”，“ value”：5，“ category”：11}，{“ user” ：“ rFKwr3vSxco3K7”，“值”：7，“类别”：9}，{“用户”：“ 1gzvu”，“值”：11，“类别”：14}，{“用户”：“ BL ymOGU”， “ value”：13，“ category”：10}，{“ user”：“ vwEH33kh8 Bhny”，“ value”：6，“ category”：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>
    )
}

}

如何使用两个不同的数据创建D3折线图

0 个答案: