Javascript 在鼠标上方d3图表旁边的框中显示变量的所有数据

我有一个d3折线图，当我把鼠标放在下面json对象中显示topNewFeature数据点的线上时，我会把它和工具提示放在一起。除了工具提示之外，我还想遍历features变量，并在鼠标上列出图表旁边框中的所有featuredescription。以下是我的数据结构的外观：

data = [{
        date : 2015-01-01,
        topNewFeature : XYZ,
        sigFeatures : 12,
        cumCPA : 43,
        features : [
            {coeff : 0.3345, featureDescription : ABC},
            {coeff : 0.7232, featureDescription : XYZ}, 
            ...
        ]
    },

        ...
]

我的json文件太大，无法上传到stack overflow提供的JSFIDLE、myjson或html/css/javascript编辑器，因此我制作了一个小flask应用程序来为其提供服务器：

以下是相关的js、html和css文件：

var保证金={
前30名，
右:200,，
底数：30，
左：50
},
宽度=960-margin.left-margin.right，
高度=470-margin.top-margin.bottom；
var parseDate=d3.time.format（“%d-%b-%y”）.parse；
var formatDate=d3.time.format（“%e%B”）；//********
var平分日期=d3.平分线（函数（d）{
返回日期；
}).左；
//设置图表范围
var x=d3.time.scale（）.range（[0，width]）；
变量y0=d3.scale.linear（）.range（[height，0]）；
变量y1=d3.scale.linear（）.范围（[height，0]）；
//定义X轴
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
//定义左Y轴
var yaxisleet=d3.svg.axis（）.scale（y0）
.方向（“左”）.刻度（5）
.tick格式（d3.format（$）；
//定义右Y轴
var yAxisRight=d3.svg.axis（）.scale（y1）
.方向（“右”）。勾号（5）；
//定义累积CPA行
var valueline=d3.svg.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y0（d.cumCPA）；
});
//定义重要特征线
var valueline2=d3.svg.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y1（d.sig特征）；
});
//定义工具提示的div
var tooldiv=d3.选择（“主体”）.追加（“div”）
.attr（“类”、“工具提示”）
.style（“不透明度”、“0”）
.样式（“显示”、“无”）；
//添加svg画布
var svg=d3。选择（“图表”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//添加工具提示行和焦点元素
var lineSvg=svg.append（“g”）；
//获取数据
d3.json（“princess_cruise.json”），函数（错误，数据）{
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 sigFeatures=+d.sigFeatures；
d、 cumCPA=+d.cumCPA；
d、 特征=d.特征；
d、 topNewFeature=d.topNewFeature；
});
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
域（[0，d3.max）（数据，函数（d）{
返回Math.max（d.cumCPA）；
})]);
y1.域（[0，d3.最大值（数据，函数（d））{
返回Math.max（d.sigFeatures）；
})]);
//添加累积CPA路径
追加（“路径”）
.风格（“笔划”，“#158BD5”）
.attr（“d”，valueline（数据））；
//添加重要功能路径
追加（“路径”）
.风格（“笔划”，“00B151”）
.attr（“d”，valueline2（数据））；
//添加X轴（日期）
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//加上Y轴（累计CPA）
svg.append（“g”）
.attr（“类”、“y轴”）
.样式（“填充”，“#158BD5”）
.呼叫（左）；
//添加Y轴（重要特征）
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+width+），0）
.样式（“填充”、“00B151”）
.呼叫（右）；
//启动工具提示集成
var focus=svg.append（“g”）
.样式（“显示”、“无”）；
//附加x行
focus.append（“行”）
.attr（“类”、“x”）
.风格（“笔划”，“#555555”）
.style（“笔划数组”、“3,3”）
.样式（“不透明度”，0.5）
.attr（“y1”，0）
.attr（“y2”，高度）；
//附加y行
focus.append（“行”）
.attr（“类别”、“y”）
.风格（“笔划”，“#555555”）
.style（“笔划数组”、“3,3”）
.样式（“不透明度”，0.5）
.attr（“x1”，宽度）
.attr（“x2”，宽度/2）；
//在交点处附加圆
//将重要特征放置在交点处
var tooltip=focus.append（“g”）
.数据（数据）
.attr（“类”、“工具箱”）；
工具提示。追加（“rect”）
.style（“填充”、“fff”）
.style（“笔划”、“eee”）
.样式（“笔划宽度”，2）
.style（“不透明度”，1）
.attr（“宽度”，200）
.attr（“高度”，35）；
工具提示。追加（“rect”）
.样式（“填充”、“eee”）
.样式（“不透明度”，0.8）
.attr（“宽度”，200）
.attr（“高度”，15）；
工具提示。追加（“文本”）
.attr（“dx”，8）
.attr（“dy”，12）
.text（“最新功能：”）；
工具提示。追加（“文本”）
.attr（“类”、“文本”）
.attr（“dx”，8）
.attr（“dy”，30岁）；
工具提示。附加（“圆”）
.attr（“类别”、“y”）
.style（“填充”、“fff”）
.风格（“笔划”，“00B151”）
.样式（“笔划宽度”，2）
.attr（“r”，6）；
//附加矩形以捕获鼠标
svg.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.style（“填充”、“无”）
.style（“指针事件”、“全部”）
.on（“鼠标悬停”，功能（d）{
focus.style（“显示”，空）；
})
.开启（“鼠标出”，功能（d）{
foc
//remove all the old selection this can me moved to mouse out as well
d3.select("#showdata").selectAll("*").remove();
//here we will append feature description to the div showdata 
d.features.forEach(function(m){
  d3.select("#showdata")
    .append("div")
    .text(m.featureDescription)
})