D3.js - 折线图不显示Y轴，X轴刻度不正确

Question

https://jsfiddle.net/jkpdu0oc/

 The above fiddle contains the code where I've plotted a line chart using 
    some sample data and displayed a tooltip on mouse hover.

问题与X轴和Y轴有关。

（1）根本不显示Y轴    （2）X轴包含＆＃34; 2017＆＃34;而不是一月。

有人可以帮我找到这两个错误吗？

Answer 1

1. Css样式使元素看起来很好
2. 根据高度，宽度和边距设置svg视口
＆＃13;
＆＃13;
var data = [{ "date": "2016.07.28", "close": 186889.45 }, { "date": "2016.07.29", "close": 187156.54 }, { "date": "2016.08.01", "close": 187218.54 }, { "date": "2016.08.02", "close": 187624.73 }, { "date": "2016.08.03", "close": 187198.72 }, { "date": "2016.08.05", "close": 185673.17 }, { "date": "2016.08.11", "close": 188383.55 }, { "date": "2016.08.12", "close": 188033.59 }, { "date": "2016.08.13", "close": 187877.45 }, { "date": "2016.08.14", "close": 187877.45 }, { "date": "2016.08.15", "close": 187935.9 }, { "date": "2016.08.16", "close": 180575.62 }, { "date": "2016.08.17", "close": 181022.03 }, { "date": "2016.08.18", "close": 180294.82 }, { "date": "2016.08.19", "close": 194423.11 }, { "date": "2016.08.20", "close": 194423.11 }, { "date": "2016.08.21", "close": 194423.11 }, { "date": "2016.08.22", "close": 194764.92 }, { "date": "2016.08.23", "close": 195921.04 }, { "date": "2016.08.24", "close": 196165.34 }, { "date": "2016.08.25", "close": 195295.62 }, { "date": "2016.08.26", "close": 193789.4 }, { "date": "2016.08.27", "close": 193789.4 }, { "date": "2016.08.28", "close": 193789.4 }, { "date": "2016.08.29", "close": 192962.36 }, { "date": "2016.08.30", "close": 193385.8 }, { "date": "2016.08.31", "close": 192847.63 }, { "date": "2016.09.01", "close": 192642.77 }, { "date": "2016.09.02", "close": 191386.36 }, { "date": "2016.09.03", "close": 191386.36 }, { "date": "2016.09.04", "close": 191386.36 }, { "date": "2016.09.05", "close": 193094.57 }, { "date": "2016.09.06", "close": 192780.48 }, { "date": "2016.09.07", "close": 192962.18 }, { "date": "2016.09.08", "close": 191930.05 }, { "date": "2016.09.09", "close": 191218.28 }, { "date": "2016.09.10", "close": 191218.28 }, { "date": "2016.09.11", "close": 191218.28 }, { "date": "2016.09.12", "close": 189525.0 }, { "date": "2016.09.13", "close": 189702.99 }, { "date": "2016.09.14", "close": 189619.42 }, { "date": "2016.09.15", "close": 189562.03 }, { "date": "2016.09.16", "close": 190639.1 }, { "date": "2016.09.17", "close": 190639.1 }, { "date": "2016.09.18", "close": 190639.1 }, { "date": "2016.09.19", "close": 190228.86 }, { "date": "2016.09.20", "close": 189971.12 }, { "date": "2016.09.21", "close": 190581.12 }, { "date": "2016.09.22", "close": 191741.9 }, { "date": "2016.09.23", "close": 192772.14 }, { "date": "2016.09.24", "close": 192772.14 }, { "date": "2016.09.25", "close": 192772.14 }, { "date": "2016.09.26", "close": 193154.27 }, { "date": "2016.09.27", "close": 192157.61 }, { "date": "2016.09.28", "close": 192716.84 }, { "date": "2016.09.29", "close": 194037.65 }, { "date": "2016.09.30", "close": 193614.04 }, { "date": "2016.10.01", "close": 193614.04 }, { "date": "2016.10.02", "close": 193614.04 }, { "date": "2016.10.03", "close": 194581.57 }, { "date": "2016.10.04", "close": 195391.81 }, { "date": "2016.10.05", "close": 195377.26 }, { "date": "2016.10.06", "close": 196131.42 }, { "date": "2016.10.07", "close": 190092.66 }, { "date": "2016.10.08", "close": 190092.66 }, { "date": "2016.10.09", "close": 190092.66 }, { "date": "2016.10.10", "close": 190368.53 }, { "date": "2016.10.11", "close": 190806.82 }, { "date": "2016.10.12", "close": 190448.96 }, { "date": "2016.10.13", "close": 189173.38 }, { "date": "2016.10.14", "close": 188938.16 }, { "date": "2016.10.15", "close": 188938.16 }, { "date": "2016.10.16", "close": 188938.16 }, { "date": "2016.10.17", "close": 188030.53 }, { "date": "2016.10.18", "close": 187809.54 }, { "date": "2016.10.19", "close": 187952.92 }, { "date": "2016.10.20", "close": 195083.79 }, { "date": "2016.10.21", "close": 194489.3 }, { "date": "2016.10.22", "close": 194489.3 }, { "date": "2016.10.23", "close": 194489.3 }, { "date": "2016.10.24", "close": 194218.48 }, { "date": "2016.10.25", "close": 194861.34 }, { "date": "2016.10.26", "close": 192822.75 }, { "date": "2016.10.27", "close": 191885.13 }, { "date": "2016.10.28", "close": 192636.85 }, { "date": "2016.10.29", "close": 192636.85 }, { "date": "2016.10.30", "close": 192636.85 }, { "date": "2016.10.31", "close": 193034.33 }, { "date": "2016.11.01", "close": 192170.96 }, { "date": "2016.11.02", "close": 189701.91 }, { "date": "2016.11.03", "close": 190672.57 }, { "date": "2016.11.04", "close": 189436.29 }, { "date": "2016.11.05", "close": 189436.29 }, { "date": "2016.11.06", "close": 189436.29 }, { "date": "2016.11.07", "close": 191073.05 }, { "date": "2016.11.08", "close": 191326.8 }, { "date": "2016.11.09", "close": 188549.19 }, { "date": "2016.11.10", "close": 193690.08 }, { "date": "2016.11.11", "close": 194838.81 }, { "date": "2016.11.12", "close": 194838.81 }, { "date": "2016.11.13", "close": 194838.81 }, { "date": "2016.11.14", "close": 194400.95 }, { "date": "2016.11.15", "close": 194454.28 }, { "date": "2016.11.16", "close": 193809.88 }, { "date": "2016.11.17", "close": 194431.97 }, { "date": "2016.11.18", "close": 194454.8 }, { "date": "2016.11.19", "close": 194454.8 }, { "date": "2016.11.20", "close": 194454.8 }, { "date": "2016.11.21", "close": 194362.66 }, { "date": "2016.11.22", "close": 195689.26 }, { "date": "2016.11.23", "close": 196840.06 }, { "date": "2016.11.24", "close": 196573.43 }, { "date": "2016.11.25", "close": 197222.61 }, { "date": "2016.11.26", "close": 197222.61 }, { "date": "2016.11.27", "close": 197222.61 }, { "date": "2016.11.28", "close": 196069.45 }, { "date": "2016.11.29", "close": 196183.64 }, { "date": "2016.11.30", "close": 195607.97 }, { "date": "2016.12.01", "close": 197671.79 }, { "date": "2016.12.02", "close": 196528.7 }, { "date": "2016.12.03", "close": 196528.7 }, { "date": "2016.12.04", "close": 196528.7 }, { "date": "2016.12.05", "close": 194944.95 }, { "date": "2016.12.06", "close": 195685.57 }, { "date": "2016.12.07", "close": 196217.61 }, { "date": "2016.12.08", "close": 197555.32 }, { "date": "2016.12.09", "close": 198589.59 }, { "date": "2016.12.10", "close": 198589.59 }, { "date": "2016.12.11", "close": 198589.59 }, { "date": "2016.12.12", "close": 198209.25 }, { "date": "2016.12.13", "close": 198456.7 }, { "date": "2016.12.14", "close": 199397.24 }, { "date": "2016.12.15", "close": 198692.79 }, { "date": "2016.12.16", "close": 198817.97 }, { "date": "2016.12.17", "close": 198817.97 }, { "date": "2016.12.18", "close": 198817.97 }, { "date": "2016.12.19", "close": 199382.09 }, { "date": "2016.12.20", "close": 199576.7 }, { "date": "2016.12.21", "close": 200561.12 }, { "date": "2016.12.22", "close": 201041.46 }, { "date": "2016.12.23", "close": 201535.35 }, { "date": "2016.12.24", "close": 201535.35 }, { "date": "2016.12.25", "close": 201535.35 }, { "date": "2016.12.26", "close": 201535.35 }, { "date": "2016.12.27", "close": 201535.35 }, { "date": "2016.12.28", "close": 202065.32 }, { "date": "2016.12.29", "close": 202453.08 }, { "date": "2016.12.30", "close": 201767.26 }, { "date": "2016.12.31", "close": 201767.26 }, { "date": "2017.01.01", "close": 201767.26 }, { "date": "2017.01.02", "close": 201767.26 }, { "date": "2017.01.03", "close": 202872.24 }, { "date": "2017.01.04", "close": 202838.69 }, { "date": "2017.01.05", "close": 202773.8 }, { "date": "2017.01.06", "close": 202194.79 }, { "date": "2017.01.07", "close": 202194.79 }, { "date": "2017.01.08", "close": 202194.79 }, { "date": "2017.01.09", "close": 203548.84 }, { "date": "2017.01.10", "close": 202295.44 }, { "date": "2017.01.11", "close": 202404.84 }, { "date": "2017.01.12", "close": 203100.32 }, { "date": "2017.01.13", "close": 201952.97 }, { "date": "2017.01.14", "close": 201952.97 }, { "date": "2017.01.15", "close": 201952.97 }, { "date": "2017.01.16", "close": 202963.59 }, { "date": "2017.01.17", "close": 202360.0 }, { "date": "2017.01.18", "close": 200943.61 }, { "date": "2017.01.19", "close": 202720.0 }, { "date": "2017.01.20", "close": 202683.49 }, { "date": "2017.01.21", "close": 202683.49 }, { "date": "2017.01.22", "close": 202683.49 }, { "date": "2017.01.23", "close": 201792.94 }, { "date": "2017.01.24", "close": 202240.71 }, { "date": "2017.01.25", "close": 203199.99 }, { "date": "2017.01.26", "close": 203199.99 }, { "date": "2017.01.27", "close": 209355.6 }, { "date": "2017.01.28", "close": 209355.6 }, { "date": "2017.01.29", "close": 209355.6 }, { "date": "2017.01.30", "close": 208032.31 }, { "date": "2017.01.31", "close": 206449.4 }, { "date": "2017.02.01", "close": 207593.94 }, { "date": "2017.02.02", "close": 207204.9 }, { "date": "2017.02.03", "close": 205736.13 }, { "date": "2017.02.04", "close": 205736.13 }, { "date": "2017.02.05", "close": 205736.13 }, { "date": "2017.02.06", "close": 205512.23 }, { "date": "2017.02.07", "close": 205512.23 }, { "date": "2017.02.08", "close": 205512.23 }, { "date": "2017.02.09", "close": 206616.72 }, { "date": "2017.02.10", "close": 206720.0 }, { "date": "2017.02.11", "close": 207656.9 }, { "date": "2017.02.12", "close": 207656.9 }, { "date": "2017.02.13", "close": 207656.9 }, { "date": "2017.02.14", "close": 208616.13 }, { "date": "2017.02.15", "close": 208156.31 }, { "date": "2017.02.16", "close": 210130.64 }, { "date": "2017.02.17", "close": 210961.77 }, { "date": "2017.02.18", "close": 210627.6 }, { "date": "2017.02.19", "close": 210627.6 }, { "date": "2017.02.20", "close": 210627.6 }, { "date": "2017.02.21", "close": 210329.8 }, { "date": "2017.02.22", "close": 210185.74 }, { "date": "2017.02.23", "close": 210999.11 }, { "date": "2017.02.24", "close": 211235.21 }, { "date": "2017.02.25", "close": 210284.28 }, { "date": "2017.02.26", "close": 210284.28 }, { "date": "2017.02.27", "close": 210284.28 }, { "date": "2017.02.28", "close": 210025.37 }, { "date": "2017.03.01", "close": 209786.23 }, { "date": "2017.03.02", "close": 209853.51 }, { "date": "2017.03.03", "close": 211387.44 }, { "date": "2017.03.04", "close": 211102.52 }, { "date": "2017.03.05", "close": 211102.52 }, { "date": "2017.03.06", "close": 211102.52 }, { "date": "2017.03.07", "close": 211102.52 }, { "date": "2017.03.08", "close": 211815.21 }, { "date": "2017.03.09", "close": 212128.63 }, { "date": "2017.03.10", "close": 211618.28 }, { "date": "2017.03.11", "close": 212988.02 }, { "date": "2017.03.12", "close": 212988.02 }, { "date": "2017.03.13", "close": 212988.02 }, { "date": "2017.03.14", "close": 213044.15 }, { "date": "2017.03.15", "close": 213590.53 }, { "date": "2017.03.16", "close": 213383.22 }, { "date": "2017.03.17", "close": 212485.67 }, { "date": "2017.03.18", "close": 213174.25 }, { "date": "2017.03.19", "close": 213174.25 }, { "date": "2017.03.20", "close": 213174.25 }, { "date": "2017.03.21", "close": 213266.1 }, { "date": "2017.03.22", "close": 212929.46 }, { "date": "2017.03.23", "close": 210850.8 }, { "date": "2017.03.24", "close": 211450.25 }, { "date": "2017.03.25", "close": 212547.05 }, { "date": "2017.03.26", "close": 212547.05 }, { "date": "2017.03.27", "close": 212547.05 }, { "date": "2017.03.28", "close": 212694.85 }, { "date": "2017.03.29", "close": 214118.91 }, { "date": "2017.03.30", "close": 215667.14 }, { "date": "2017.03.31", "close": 215877.02 }, { "date": "2017.04.01", "close": 215227.36 }, { "date": "2017.04.02", "close": 215227.36 }, { "date": "2017.04.03", "close": 215227.36 }, { "date": "2017.04.04", "close": 215316.62 }, { "date": "2017.04.05", "close": 215069.48 }, { "date": "2017.04.06", "close": 215710.08 }, { "date": "2017.04.07", "close": 215136.09 }, { "date": "2017.04.08", "close": 215136.09 }, { "date": "2017.04.09", "close": 215348.03 }, { "date": "2017.04.10", "close": 215348.03 }, { "date": "2017.04.11", "close": 216189.46 }, { "date": "2017.04.12", "close": 216284.66 }, { "date": "2017.04.13", "close": 216020.6 }, { "date": "2017.04.14", "close": 214292.58 }, { "date": "2017.04.15", "close": 214292.58 }, { "date": "2017.04.16", "close": 214292.58 }, { "date": "2017.04.17", "close": 214292.58 }, { "date": "2017.04.18", "close": 214292.58 }, { "date": "2017.04.19", "close": 213644.33 }, { "date": "2017.04.20", "close": 213147.66 }, { "date": "2017.04.21", "close": 213150.47 }, { "date": "2017.04.22", "close": 207652.12 }, { "date": "2017.04.23", "close": 207652.12 }, { "date": "2017.04.24", "close": 207652.12 }, { "date": "2017.04.25", "close": 214072.11 }, { "date": "2017.04.26", "close": 214072.11 }, { "date": "2017.04.27", "close": 215272.23 }, { "date": "2017.04.28", "close": 221297.86 }, { "date": "2017.04.29", "close": 222608.42 }, { "date": "2017.04.30", "close": 222608.42 }, { "date": "2017.05.01", "close": 222608.42 }, { "date": "2017.05.02", "close": 223240.16 }, { "date": "2017.05.03", "close": 223280.51 }, { "date": "2017.05.04", "close": 222591.05 }, { "date": "2017.05.05", "close": 222770.69 }, { "date": "2017.05.06", "close": 222270.51 }, { "date": "2017.05.07", "close": 222270.51 }, { "date": "2017.05.08", "close": 222270.51 }, { "date": "2017.05.09", "close": 222826.63 }, { "date": "2017.05.10", "close": 222155.13 }, { "date": "2017.05.11", "close": 222862.08 }, { "date": "2017.05.12", "close": 223234.9 }, { "date": "2017.05.13", "close": 222110.62 }, { "date": "2017.05.14", "close": 222110.62 }, { "date": "2017.05.15", "close": 222110.62 }, { "date": "2017.05.16", "close": 221685.39 }, { "date": "2017.05.17", "close": 222479.4 }, { "date": "2017.05.18", "close": 221095.66 }, { "date": "2017.05.19", "close": 219951.35 }, { "date": "2017.05.20", "close": 220137.2 }, { "date": "2017.05.21", "close": 220137.2 }, { "date": "2017.05.22", "close": 220137.2 }, { "date": "2017.05.23", "close": 220342.16 }, { "date": "2017.05.24", "close": 219738.2 }, { "date": "2017.05.25", "close": 219621.53 }, { "date": "2017.05.26", "close": 219932.88 }, { "date": "2017.05.27", "close": 219071.37 }, { "date": "2017.05.28", "close": 219071.37 }, { "date": "2017.05.29", "close": 219071.37 }, { "date": "2017.05.30", "close": 281632.11 }, { "date": "2017.05.31", "close": 281273.59 }, { "date": "2017.06.01", "close": 281073.55 }, { "date": "2017.06.02", "close": 281600.94 }, { "date": "2017.06.03", "close": 282551.05 }, { "date": "2017.06.04", "close": 282551.05 }, { "date": "2017.06.05", "close": 282551.05 }, { "date": "2017.06.06", "close": 281854.46 }, { "date": "2017.06.07", "close": 269015.14 }, { "date": "2017.06.08", "close": 291961.02 }, { "date": "2017.06.09", "close": 269744.44 }, { "date": "2017.06.10", "close": 269247.19 }, { "date": "2017.06.11", "close": 269247.19 }, { "date": "2017.06.12", "close": 269247.19 }, { "date": "2017.06.13", "close": 268672.44 }, { "date": "2017.06.14", "close": 270420.42 }, { "date": "2017.06.15", "close": 272527.92 }, { "date": "2017.06.16", "close": 270894.13 }, { "date": "2017.06.17", "close": 271136.68 }, { "date": "2017.06.18", "close": 271136.68 }, { "date": "2017.06.19", "close": 271136.68 }, { "date": "2017.06.20", "close": 271552.1 }, { "date": "2017.06.21", "close": 270670.52 }, { "date": "2017.06.22", "close": 268857.48 }, { "date": "2017.06.23", "close": 270049.75 }, { "date": "2017.06.24", "close": 270699.7 }, { "date": "2017.06.25", "close": 270699.7 }, { "date": "2017.06.26", "close": 270699.7 }, { "date": "2017.06.27", "close": 270699.7 }, { "date": "2017.06.28", "close": 270699.7 }, { "date": "2017.06.29", "close": 276302.11 }, { "date": "2017.06.30", "close": 289260.19 }, { "date": "2017.07.01", "close": 287564.82 }, { "date": "2017.07.02", "close": 287564.82 }];



                margin = {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 80
                };
                var width = 960,
                            height = 500;

                var vis = d3.select("#line_chart").append("svg")
                                    .attr("width", width + margin.left + margin.right)
                                    .attr("height", height + margin.top + margin.bottom);

                var parseTime = d3.time.format("%Y.%m.%d").parse;

                max_y = 0;
                var extent = d3.extent(data.map(function (d) { return d.date }))

                max_x = extent[1];
                min = extent[0];

                for (i = 0; i < data.length; i++) {
                    max_y = Math.max(max_y, data[i].close);
                }

                var x = d3.time.scale()
                 .rangeRound([0, width]);

                var y = d3.scale.linear()
                  .rangeRound([height, 0]);

                var line = d3.svg.line()
                  .x(function (d) {
                      return x(parseTime(d.date));
                  })
                  .y(function (d) {
                      return y(d.close);
                  });



                x.range([margin.left, width - margin.right]).domain(d3.extent(data, function (d) {
                    return parseTime(d.date);

                }));
                y.range([height - margin.top, margin.bottom]).domain(d3.extent(data, function (d) {
                    return d.close;
                }));


             

                var lineGen = d3.svg.line()
                     .x(function (d) {
                         return x(parseTime(d.date));
                     })
                     .y(function (d) {
                         return y(d.close);
                     })
                     .interpolate("basis");

                vis.append("g")
				.attr('class', 'axis')
                  .attr("transform", "translate(0," + height + ")")
                  .call(d3.svg.axis().scale(x))
                  

                vis.append("g")
					.attr('class', 'axis')
					.attr("transform", "translate(" + margin.left + ",0)")
                    .call(d3.svg.axis().scale(y)
                .orient("left"))
                  .append("text")
                  .attr("fill", "#000")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", "0.71em")
                  .attr("text-anchor", "end")
                  .text("Price ($)");

                vis.append('svg:path')
                  .datum(data)
                  .attr("fill", "none")
                  .attr("stroke", "steelblue")
                  .attr("stroke-linejoin", "round")
                  .attr("stroke-linecap", "round")
                  .attr("stroke-width", 1.5)
                  .attr("d", line);
   var hoverLineGroup = vis.append("g")
                                    .attr("class", "hover-line");

                var hoverLine = hoverLineGroup
                    .append("line")
                        .attr("stroke", "#000")
                        .attr("x1", 10).attr("x2", 10)
                        .attr("y1", 0).attr("y2", height);

                var hoverTT = hoverLineGroup.append('text')
                   .attr("class", "hover-tex capo")
                   .attr('dy', "0.35em");

                var cle = hoverLineGroup.append("circle")
                    .attr("r", 4.5);

                var hoverTT2 = hoverLineGroup.append('text')

                   .attr("class", "hover-text capo")
                   .attr('dy', "0.55em");

                hoverLineGroup.style("opacity", 1e-6);

                var rectHover = vis.append("rect")
                  .data(data)
                  .attr("fill", "none")
                  .attr("class", "overlay")
                  .attr("width", width)
                  .attr("height", height);

                //vis
                    //.on("mouseout", hoverMouseOff)
                   // .on("mousemove", hoverMouseOn);

                var bisectDate = d3.bisector(function (d) { return parseTime(d.date); }).left;

                function hoverMouseOn() {

                    var mouse_x = d3.mouse(this)[0];
                    var mouse_y = d3.mouse(this)[1];
                    var graph_y = y.invert(mouse_y);
                    var graph_x = x.invert(mouse_x);

                    var mouseDate = x.invert(mouse_x);
                    var i = bisectDate(data, mouseDate);

                    var d0 = data[i - 1]
                    var d1 = data[i];

                    var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;

                    hoverTT.text("Marks: " + d.date);                 
                    hoverTT.attr('x', mouse_x);
                    hoverTT.attr('y', y(d.close));


                    hoverTT2.text("Frequency: " + Math.round(d.close * 100) / 100)
                       .attr('x', mouse_x)
                       .attr('y', y(d.close) + 10);

                    cle
                      .attr('x', mouse_x)
                      .attr('y', mouse_y);


                    hoverLine.attr("x1", mouse_x).attr("x2", mouse_x)
                    hoverLineGroup.style("opacity", 1);

                }

                function hoverMouseOff() {
                    hoverLineGroup.style("opacity", 1e-6);
                }
＆＃13;
.axis path, line {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
}
＆＃13;
<script src="https://d3js.org/d3.v3.min.js"></script>


 <div id="line_chart" ></div>
＆＃13;
＆＃13;
＆＃13;