Javascript 无法在“X轴”内仅显示一次X轴值；rect"；使用d3

身体{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
.线路{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}
ValMyDATA =“日期纽约旧金山奥斯丁\n
20111001 63.4 62.7 72.2\n\
20111002 58.0 59.9 67.7\n\
20111003 53.3 59.1 69.4\n\
20111004 55.7 58.8 68.0\n\
20111005 64.2 58.7 72.4\n\
20111006 58.8 57.0 77.0\n\
20111007 57.9 56.7 82.3\n\
20111008 61.8 56.8 78.9\n\
20111009 69.3 56.7 68.8\n\
20111010 71.2 60.1 68.7\n\
20111011 68.7 61.1 70.3\n\
20111012 61.8 61.5 75.3\n\
20111013 63.0 64.3 76.6\n\
20111014 66.9 67.1 66.6\n\
20111015 61.7 64.6 68.0\n\
20111016 61.8 61.6 70.6\n\
20111017 62.8 61.1 71.1\n\
20111018 60.8 59.2 70.0\n\
20111019 62.1 58.9 61.6\n\
20111020 65.1 57.2 57.4\n\
20111021 55.6 56.4 64.3\n\
20111022 54.4 60.7 72.4\n”；
var保证金={
前20名，
右:80,，
底数：30，
左：50
},
宽度=500-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var parseDate=d3.time.format（“%Y%m%d”）.parse；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var color=d3.scale.category20（）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var line=d3.svg.line（）
.插入（“基础”）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.温度）；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var data=d3.tsv.parse（myData）；
color.domain（d3.keys（数据[0]）过滤器（函数（键）{
返回键！=“日期”；
}));
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
});
var cities=color.domain（）.map（函数（名称）{
返回{
姓名:姓名,，
值：data.map（函数（d）{
返回{
日期：d.date，
温度：+d[名称]
};
})
};
});
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 领域([
d3.min（城市、功能（c）{
返回d3.min（c.values，函数（v）{
返回v.温度；
});
}),
d3.最大值（城市、功能（c）{
返回d3.最大值（c.值，函数（v）{
返回v.温度；
});
})
]);
var legend=svg.selectAll（'g'）
.数据（城市）
.输入（）
.append（'g'）
.attr（“类”、“图例”）；
图例.append（'rect'）
.attr（'x'，宽度-20）
.attr（'y'，函数（d，i）{
返回i*20；
})
.attr（'宽度'，10）
.attr（'height'，10）
.样式（“填充”，功能（d）{
返回颜色（d.name）；
});
图例.append（'text'）
.attr（'x'，宽度-8）
.attr（'y'，函数（d，i）{
返回（i*20）+9；
})
.文本（功能（d）{
返回d.name；
});
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“温度（ºF）”；
var city=svg.selectAll（“.city”）
.数据（城市）
.enter（）.append（“g”）
.attr（“类别”、“城市”）；
city.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{
返回线（d值）；
})
.样式（“笔划”，功能（d）{
返回颜色（d.name）；
});
城市。附加（“文本”）
.基准（功能（d）{
返回{
姓名：d.name，
值：d.values[d.values.length-1]
};
})
.attr（“转换”，函数（d）{
返回“translate（“+x（d.value.date）+”，“+y（d.value.temperature）+”）；
})
.attr（“x”，3）
.attr（“dy”，“.35em”）
.文本（功能（d）{
返回d.name；
});
// **************************************************************************************** //
var mouseG=svg.append（“g”）
.attr（“类”、“鼠标悬停效果”）；
append（“path”）//这是跟随鼠标的黑色垂直线
.attr（“类”、“鼠标线”）
.style（“笔划”、“黑色”）
.style（“笔划宽度”、“1px”）
.样式（“不透明度”、“0”）；
var lines=document.getElementsByClassName（'line'）；
var mousePerLine=mouseG.selectAll（“.mouse per line”）
.数据（[城市]）
.输入（）
.附加（“g”）
.attr（“类”，“每行鼠标”）；
mousePerLine.selectAll（'.mouse per line'）//矩形
.数据（[城市]）
.输入（）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，90）
.style（“填充”、“5px”）
.风格（“笔划”，“#2725255”）
.样式（“填充”，“#2725255”）
.style（“笔划宽度”、“1px”）
.style（“不透明度”、“0”）
.attr（'x'，10）
.attr（'y'，-45）；
mousePerLine.selectAll（'.mouse per line'）//圆圈
.数据（城市）
.输入（）
.附加（“圆圈”）
.attr（“r”，5）
.样式（“笔划”，功能（d）{
返回颜色（d.name）；
})
.样式（“填充”，功能（d）{
返回颜色（d.name）；
})
.style（“笔划宽度”、“1px”）
.样式（“不透明度”、“0”）；
mousePerLine.selectAll（'.mouse per line'）//文本
.数据（城市）
.输入（）
.append（“文本”）
.attr（“转换”、“翻译（15,13）”）
.style（“填充”，functi