Question

我试图让d3图表互动，在此之前我有图表和一些带有id的图表div。

点击id我正在过滤数据并尝试绘制但没有运气

我是d3的新手，因为它不能理解问题在哪里

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和脚本

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

        });

我已经按照以下原因进行了编码当我点击这里的div（复选框或文本框旁边的文本）时，它应该绘制一个图表，但它的行为不符合我的预期。

fiddle

Answer 1

有几个问题：

数据未添加到路径

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

没有名为＆＃39; time＆＃39;在数据中

       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需要日期对象：

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

类应分配给路径

检查https://jsfiddle.net/vcuo9x4e/，我为＆＃39; i6_Line＆＃39;添加了更多数据和＆＃39; i5_Line＆＃39;，因为他们每个只有一个数据点。

无法在d3图表中绘制线条

1 个答案: