无法在D3图表中绘制线

Question

I am trying to make d3 chart interactive, before this i have chart and some div to that chart with id.

on click of id i am filtering data and trying to plot but no luck

I am new to d3 due to which not able understand where is issue also

data4.json

{
"data_high":[
    {
        "line_id": "i6_Line",
        "line_name": "6 Line",
        "mean": 73.400000000000006
    },
    {
        "line_id": "i5_Line",
        "line_name": "5 Line",
        "mean": 73.400000000000006
    },
    {
        "line_id": "i4_Line",
        "line_name": "4 Line",
        "mean": 73.400000000000006
    },
    {
        "line_id": "i3_Line",
        "line_name": "3 Line",
        "mean": 73.400000000000006
    }
  ]
}

data5.json

{
"data_low":[
    {
        "line_id": "i6_Line",
        "line_name": "6 Line",
        "late_percent": 73.1,
        "month": 1
    },
    {
        "line_id": "i6_Line",
        "line_name": "6 Line",
        "late_percent": 63.1,
        "month": 1
    },
    {
        "line_id": "i5_Line",
        "line_name": "5 Line",
        "late_percent": 73.1,
        "month": 1
    },
    {
        "line_id": "i4_Line",
        "line_name": "4 Line",
        "late_percent": 73.1,
        "month": 1
    },
    {
        "line_id": "i3_Line",
        "line_name": "3 Line",
        "late_percent": 73.1,
        "month": 1
    }
]

}

HTML and Script

<div id="timeseries"></div>
    <div id="key"></div>
    <script>

        d3.json("data4.json", function(data){

            console.log(data);

            var container_dimensions = {width: 900, height: 500},
                margins = {top: 10, right: 20, bottom: 50, left: 60},
                chart_dimensions = {
                width: container_dimensions.width - margins.left - margins.right,
                height: container_dimensions.height - margins.top - margins.bottom
                };

            var chart = d3.select("#timeseries")
                .append("svg")
                .attr("width", container_dimensions.width)
                .attr("height", container_dimensions.height)
                .append("g")
                .attr("transform", "translate(" + margins.left + "," + margins.top + ")")
                .attr("id","chart");

            var time_scale = d3.time.scale()
                .range([0,chart_dimensions.width])
                .domain([new Date(2008, 0, 1), new Date(2011, 3, 1)]);

            var percent_scale = d3.scale.linear()
                .range([chart_dimensions.height, 0])
                .domain([65,90]);

            var time_axis = d3.svg.axis()
                .scale(time_scale);

            var count_axis = d3.svg.axis()
                .scale(percent_scale)
                .orient("left");

            chart.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + chart_dimensions.height + ")")
                .call(time_axis);

            chart.append("g")
                .attr("class", "y axis")
                .call(count_axis);

            d3.select(".y.axis")
                .append("text")
                .attr("text-anchor","middle")
                .text("percent on time")
                //.attr("transform", "rotate (90)")
                .attr("transform","rotate (-90, -88, 0) translate(-280)")
                //.attr("x", chart_dimensions.height/2)
                .attr("y", 50);

            d3.select(".x.axis")
                .append("text")
                .attr("text-anchor","middle")
                .text("Time")
                //
                .attr("transform","rotate (-90, 50,-90) translate(-490)")
                //.attr("transform", "rotate (90,0,0)")
                .attr("x", chart_dimensions.width/2)
                .attr("y", 50);

            var key_items = d3.select("#key")
                .selectAll("div")
                .data(data.data_high)
                .enter()
                .append("div")
                .attr("class","key_line")
                .attr("id",function(d){return d.line_id});

            key_items.append("div")
                .attr("id", function(d){return "key_square_" + d.line_id})
                .attr("class", "key_square");

            key_items.append("div")
                .attr("class","key_label")
                .text(function(d){return d.line_name});

            d3.selectAll(".key_line").on("click", get_timeseries_data);

            function get_timeseries_data(){
                // get the id of the current element
                var id = d3.select(this).attr("id");
                // see if we have an associated time series
                var ts = d3.select("#"+id+"_path");
                console.log(ts);
                if (ts.empty()){
                    d3.json("data5.json", function(data){
                        console.log("======= " +data);
                        filtered_data = data.data_low.filter(function(d){return d.line_id === id});
                        console.log(filtered_data);
                        draw_timeseries(filtered_data, id);
                    })
                } else {
                    ts.remove();
                }
            }

            function draw_timeseries(data, id){

                var line = d3.svg.line()
                    .x(function(d){return time_scale(d.time)})
                    .y(function(d){return percent_scale(d.late_percent)})
                    .interpolate("linear");

                var g = d3.select("#chart")
                    .append("g")
                    .attr("id", id + "_path")
                    .attr("class", id.split("_")[1]);

                g.append("path")
                    .attr("d", line(75));
            }

        });

I have did this coding for following reason when i click on div here (check box or text beside textbox) it should plot a chart but its not behaving as I expected.

fiddle

Answer 1

There are several issues:

• data is not added to the path

    g.append("path") .datum(data) //<--this .attr("class", "line") .attr("d", line); 

• there is no property called 'time' in data

    var line = d3.svg.line() .x(function(d){return time_scale(d.time)}) // <-- this .y(function(d){return percent_scale(d.late_percent)}) .interpolate("linear"); 

  time_scale expects date object:

    x(function(d) { var date = (new Date()); date.setMonth(d.month); date.setYear(2008); return time_scale(date) }) 

• class should be assigned to path

Check https://jsfiddle.net/vcuo9x4e/ , i have added some more data for 'i6_Line' and 'i5_Line', as they had just one data points each.