如何将d3.js差异图的例子有工作的JSON数据？ [英] How would d3.js difference chart example work with json data?
本文介绍了如何将d3.js差异图的例子有工作的JSON数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在努力让这个例子：
http://bl.ocks.org/mbostock/3894205
...使用JSON工作，这样我就可以在实时数据的portlet中使用它。我可以看到的数据元素，如果我做了一个警告，但该组件没有渲染。我只得到了Y轴，其标签显示出来。
这可能是错的部分是：
d3.json（data.json功能（错误数据）{
如果（错误）返回console.warn（错误）;
data.data.forEach（功能（D）{
d.date = parseDate（d.date）;
D [旧金山] = + D [旧金山];
D [纽约] = + D [纽约];
算上++;
如果（计数＆GT; 360）{
警报（d.date ++ D [旧金山] ++ D [纽约]）;
}
}）;
从HTML文件中取出
＆LT;！DOCTYPE HTML＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT;风格＆GT;
体 {
字体：10px的无衬线;
}
.axis路径，
.axis行{
补：无;
行程：＃000;
形状呈现：crispEdges;
}
.x.axis路径{
显示：无;
}
.area.above {
补：RGB（252,141,89）;
}
.area.below {
补：RGB（145,207,96）;
}
。线 {
补：无;
行程：＃000;
笔画宽度：1.5px;
}
＆LT; /风格＆GT;
＆LT;身体GT;
＆所述;脚本的src =http://d3js.org/d3.v3.min.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本＆GT;
VAR利润率= {顶：20，右：20，下：30，左：50}，
宽= 960 - margin.left - margin.right，
高度= 500 - margin.top - margin.bottom;
VAR parseDate = d3.time.format（％Y％M％D）解析。
VAR X = d3.time.scale（）
.range（[0，宽度]）;
变种Y = d3.scale.linear（）
.range（[身高，0]）;
VAR XAXIS = d3.svg.axis（）
.scale（X）
。东方（底部）;
变种Y轴= d3.svg.axis（）
.scale（Y）
。东方（左）;
VAR线= d3.svg.area（）
.interpolate（基础）
.X（功能（D）{返回X（d.date）;}）
.Y（功能（D）{返回Y（D [纽约]）;}）;
VAR面积= d3.svg.area（）
.interpolate（基础）
.X（功能（D）{返回X（d.date）;}）
.y1（功能（D）{返回Y（D [纽约]）;}）;
VAR SVG = d3.select（身体）。追加（SVG）
.attr（宽度，宽度+ margin.left + margin.right）
.attr（高度，身高+ margin.top + margin.bottom）
.append（克）
.attr（转化，翻译（+ margin.left +，+ margin.top +））;
变种数= 0;
d3.json（data.json功能（错误数据）{
如果（错误）返回console.warn（错误）;
data.data.forEach（功能（D）{
d.date = parseDate（d.date）;
D [旧金山] = + D [旧金山];
D [纽约] = + D [纽约];
算上++;
如果（计数＆GT; 360）{
警报（d.date ++ D [旧金山] ++ D [纽约]）;
}
}）;
x.domain（d3.extent（数据，功能（D）{返回d.date;}））;
y.domain（[
d3.min（数据，功能（D）{返回Math.min（D [纽约]，D [旧金山]）;}）
d3.max（数据，功能（D）{返回Math.max（D [纽约]，D [旧金山]）;}）
]）;
svg.datum（数据）;
svg.append（clipPath）
.attr（ID，夹子下面）
.append（路径）
.attr（d的，area.y0（高度））;
svg.append（clipPath）
.attr（ID，夹子上方）
.append（路径）
.attr（d的，area.y0（0））;
svg.append（路径）
.attr（类，区域上方）
.attr（夹路径，网址（＃夹子以上））
.attr（D，area.y0（功能（D）{返回Y（D [旧金山]）;}））;
svg.append（路径）
.attr（类，下面的区域）
.attr（夹路径，网址（＃夹子下面））
.attr（D，区）;
svg.append（路径）
.attr（类，线）
.attr（D，线）;
svg.append（克）
.attr（类，X轴）
.attr（改造，翻译（0，+高度+））
.CALL（X轴）;
svg.append（克）
.attr（类，Y轴）
.CALL（Y轴）
.append（文本）
.attr（改造，旋转（-90））
.attr（Y，6）
.attr（DY，.71em）
.style（文本锚定，结束）
的.text（温度（华氏））;
}）;
＆LT; / SCRIPT＆GT;
使用以下data.json文件
{数据：
{日期：20111001，纽约：83.4，旧金山：82.7}，
{日期：20111002，纽约：78.1，旧金山：79.9}，
{日期：20111003，纽约：73.3，旧金山：79.1}，
{日期：20111004，纽约：75.7，旧金山：78.8}，
{日期：20111005，纽约：84.2，旧金山：78.7}，
{日期：20111006，纽约：78.8，旧金山：77}，
{日期：20111007，纽约：77.9，旧金山：76.7}，
{日期：20111008，纽约：81.8，旧金山：76.8}，
{日期：20111009，纽约：89.3，旧金山：76.7}，
{日期：20111010，纽约：91.2，旧金山：80.1}，
{日期：20111011，纽约：88.7，旧金山：81.1}，
{日期：20111012，纽约：81.8，旧金山：81.5}，
{日期：20111013，纽约：83.1，旧金山：84.3}，
{日期：20111014，纽约：86.9，旧金山：87.1}，
{日期：20111015，纽约：81.7，旧金山：84.6}，
{日期：20111016，纽约：81.8，旧金山：81.6}，
{日期：20111017，纽约：82.8，旧金山：81.1}，
{日期：20111018，纽约：80.8，旧金山：79.2}，
{日期：20111019，纽约：82.1，旧金山：78.9}，
{日期：20111020，纽约：85.1，旧金山：77.2}，
{日期：20111021，纽约：75.6，旧金山：76.4}，
{日期：20111022，纽约：74.4，旧金山：80.7}，
{日期：20111023，纽约：74.4，旧金山：85.1}，
{日期：20111024，纽约：74.8，旧金山：80.9}，
{日期：20111025，纽约：77.9，旧金山：76.1}，
{日期：20111026，纽约：74.6，旧金山：74.6}，
{日期：20111027，纽约：74.4，旧金山：76.1}，
{日期：20111028，纽约：62.5，旧金山：78.1}，
{日期：20111029，纽约：60.9，旧金山：77.5}，
{日期：20111030，纽约：58.6，旧金山：77.7}，
{日期：20111031，纽约：64.2，旧金山：75.1}，
{日期：20111101，纽约：69.6，旧金山：77.9}，
{日期：20111102，纽约：67.2，旧金山：84.6}，
{日期：20111103，纽约：70.1，旧金山：76.2}，
{日期：20111104，纽约：70.1，旧金山：70.5}，
{日期：20111105，纽约：63.5，旧金山：71.3}，
{日期：20111106，纽约：63.8，旧金山：72.6}，
{日期：20111107，纽约：68.9，旧金山：71.4}，
{日期：20111108，纽约：75.5，旧金山：70.6}，
{日期：20111109，纽约：73.7，旧金山：74.6}，
{日期：20111110，纽约：77.7，旧金山：75.6}，
{日期：20111111，纽约：68.5，旧金山：73.9}，
{日期：20111112，纽约：66.8，旧金山：74}，
{日期：20111113，纽约：71.1，旧金山：73.8}，
{日期：20111114，纽约：76.8，旧金山：73.5}，
{日期：20111115，纽约：79.7，旧金山：73.4}，
{日期：20111116，纽约：76.5，旧金山：72.2}，
{日期：20111117，纽约：69.6，旧金山：72.7}，
{日期：20111118，纽约：61.5，旧金山：73.1}，
{日期：20111119，纽约：64.3，旧金山：69}，
{日期：20111120，纽约：74.1，旧金山：70.4}，
{日期：20111121，纽约：74.1，旧金山：71.1}，
{日期：20111122，纽约：69.4，旧金山：72.3}，
{日期：20111123，纽约：70.1，旧金山：74.6}，
{日期：20111124，纽约：64.1，旧金山：75.1}，
{日期：20111125，纽约：70.3，旧金山：71.5}，
{日期：20111126，纽约：72.1，旧金山：73.6}，
{日期：20111127，纽约：69.6，旧金山：72.3}，
{日期：20111128，纽约：77.2，旧金山：71}，
{日期：20111129，纽约：79.1，旧金山：69.5}，
{日期：20111130，纽约：70.6，旧金山：69.8}，
{日期：20111201，纽约：64.3，旧金山：80.4}，
{日期：20111202，纽约：63.9，旧金山：82.2}，
{日期：20111203，纽约：62.1，旧金山：78.3}，
{日期：20111204，纽约：63.9，旧金山：72.7}，
{日期：20111205，纽约：70.2，旧金山：71.5}，
{日期：20111206，纽约：74.2，旧金山：69.9}，
{日期：20111207，纽约：74.6，旧金山：68.6}，
{日期：20111208，纽约：63.4，旧金山：66.4}，
{日期：20111209，纽约：62.2，旧金山：69.8}，
{日期：20111210，纽约：65.1，旧金山：72.1}，
{日期：20111211，纽约：53.8，旧金山：68.8}，
{日期：20111212，纽约：56.8，旧金山：67.4}，
{日期：20111213，纽约：58.6，旧金山：67.2}，
{日期：20111214，纽约：61.9，旧金山：66.1}，
{日期：20111215，纽约：69.6，旧金山：68.8}，
{日期：20111216，纽约：70.2，旧金山：67.9}，
{日期：20111217，纽约：60.6，旧金山：69.8}，
{日期：20111218，纽约：49.1，旧金山：69.1}，
{日期：20111219，纽约：53.7，旧金山：68.3}，
{日期：20111220，纽约：65.8，旧金山：69.3}，
{日期：20111221，纽约：67.4，旧金山：68.4}，
{日期：20111222，纽约：74.4，旧金山：73.3}，
{日期：20111223，纽约：67.8，旧金山：67.5}，
{日期：20111224，纽约：54.9，旧金山：67.9}，
{日期：20111225，纽约：55.9，旧金山：68.9}，
{日期：20111226，纽约：63.6，旧金山：65.9}，
{日期：20111227，纽约：62.9，旧金山：67.2}，
{日期：20111228，纽约：66.2，旧金山：68.9}，
{日期：20111229，纽约：50.8，旧金山：70.9}，
{日期：20111230，纽约：60.8，旧金山：72.9}，
{日期：20111231，纽约：69.8，旧金山：70.1}，
{日期：20120101，纽约：66.3，旧金山：73.9}，
{日期：20120102，纽约：63.2，旧金山：73.1}，
{日期：20120103，纽约：50.3，旧金山：69.7}，
{日期：20120104，纽约：39.2，旧金山：72.7}，
{日期：20120105，纽约：52.1，旧金山：72.6}，
{日期：20120106，纽约：61.2，旧金山：69}，
{日期：20120107，纽约：67.1，旧金山：71}，
{日期：20120108，纽约：66.1，旧金山：76.8}，
{日期：20120109，纽约：54.7，旧金山：72.3}，
{日期：20120110，纽约：59.4，旧金山：71.6}，
{日期：20120111，纽约：60.4，旧金山：69.8}，
{日期：20120112，纽约：65.4，旧金山：71.9}，
{日期：20120113，纽约：60.7，旧金山：73.7}，
{日期：20120114，纽约：50.4，旧金山：72.9}，
{日期：20120115，纽约：43.9，旧金山：69.7}，
{日期：20120116，纽约：42.6，旧金山：65.3}，
{日期：20120117，纽约：59.8，旧金山：63.6}，
{日期：20120118，纽约：63.2，旧金山：65}，
{日期：20120119，纽约：46.3，旧金山：67.3}，
{日期：20120120，纽约：52.8，旧金山：71.4}，
{日期：20120121，纽约：47.4，旧金山：73.7}，
{日期：20120122，纽约：45.1，旧金山：68.3}，
{日期：20120123，纽约：59.4，旧金山：72.9}，
{日期：20120124，纽约：68.7，旧金山：69.1}，
{日期：20120125，纽约：63.1，旧金山：72.1}，
{日期：20120126，纽约：57.1，旧金山：73.6}，
{日期：20120127，纽约：68.2，旧金山：70.4}，
{日期：20120128，纽约：63.7，旧金山：70.3}，
{日期：20120129，纽约：60.1，旧金山：73.8}，
{日期：20120130，纽约：58.0，旧金山：71.9}，
{日期：20120131，纽约：63.5，旧金山：70}，
{日期：20120201，纽约：70.4，旧金山：70}，
{日期：20120202，纽约：65.8，旧金山：71.3}，
{日期：20120203，纽约：57.5，旧金山：71.5}，
{日期：20120204，纽约：60.8，旧金山：72}，
{日期：20120205，纽约：56.5，旧金山：73.8}，
{日期：20120206，纽约：59.1，旧金山：74.6}，
{日期：20120207，纽约：63.2，旧金山：74.3}，
{日期：20120208，纽约：56.5，旧金山：71.9}，
{日期：20120209，纽约：56.5，旧金山：73.8}，
{日期：20120210，纽约：58.3，旧金山：73.9}，
{日期：20120211，纽约：56.9，旧金山：72.3}，
{日期：20120212，纽约：49.7，旧金山：70.1}，
{日期：20120213，纽约：53.1，旧金山：69.5}，
{日期：20120214，纽约：59.6，旧金山：68.6}，
{日期：20120215，纽约：62.3，旧金山：69.9}，
{日期：20120216，纽约：59.7，旧金山：72.4}，
{日期：20120217，纽约：66.0，旧金山：69.9}，
{日期：20120218，纽约：61.2，旧金山：71.6}，
{日期：20120219，纽约：59.8，旧金山：67.8}，
{日期：20120220，纽约：58.1，旧金山：68.7}，
{日期：20120221，纽约：57.1，旧金山：69.7}，
{日期：20120222，纽约：65.5，旧金山：73.4}，
{日期：20120223，纽约：70.6，旧金山：74.1}，
{日期：20120224，纽约：62.7，旧金山：75.9}，
{日期：20120225，纽约：62.6，旧金山：71.7}，
{日期：20120226，纽约：56.9，旧金山：67.7}，
{日期：20120227，纽约：60.9，旧金山：65.4}，
{日期：20120228，纽约：65.9，旧金山：67}，
{日期：20120229，纽约：60.7，旧金山：69.8}，
{日期：20120301，纽约：61.3，旧金山：68.9}，
{日期：20120302，纽约：56.8，旧金山：68.1}，
{日期：20120303，纽约：67.6，旧金山：70.7}，
{日期：20120304，纽约：64.2，旧金山：75}，
{日期：20120305，纽约：58.5，旧金山：68.8}，
{日期：20120306，纽约：52.9，旧金山：68.4}，
{日期：20120307，纽约：63.3，旧金山：69.9}，
{日期：20120308，纽约：71.2，旧金山：69.2}，
{日期：20120309，纽约：67.8，旧金山：71.7}，
{日期：20120310，纽约：57.2，旧金山：69.3}，
{日期：20120311，纽约：62.9，旧金山：70}，
{日期：20120312，纽约：68.8，旧金山：68.6}，
{日期：20120313，纽约：72.6，旧金山：73.9}，
{日期：20120314，纽约：80.5，旧金山：75.2}，
{日期：20120315，纽约：67.2，旧金山：75.9}，
{日期：20120316，纽约：64.7，旧金山：74.6}，
{日期：20120317，纽约：68.2，旧金山：68.2}，
{日期：20120318，纽约：68.2，旧金山：67.1}，
{日期：20120319，纽约：73.1，旧金山：65.8}，
{日期：20120320，纽约：77.8，旧金山：69.7}，
{日期：20120321，纽约：77.5，旧金山：71.4}，
{日期：20120322，纽约：77.3，旧金山：71.4}，
{日期：20120323，纽约：81.7，旧金山：68.4}，
{日期：20120324，纽约：75.8，旧金山：69}，
{日期：20120325，纽约：68.4，旧金山：66.4}，
{日期：20120326，纽约：69.8，旧金山：69.7}，
{日期：20120327，纽约：59.6，旧金山：74.1}，
{日期：20120328，纽约：69.7，旧金山：74.6}，
{日期：20120329，纽约：76.8，旧金山：72.3}，
{日期：20120330，纽约：66.5，旧金山：74.5}，
{日期：20120331，纽约：62.2，旧金山：76.2}，
{日期：20120401，纽约：65.3，旧金山：71.1}，
{日期：20120402，纽约：68.1，旧金山：70.5}，
{日期：20120403，纽约：71.2，旧金山：72.2}，
{日期：20120404，纽约：81.0，旧金山：70.6}，
{日期：20120405，纽约：70.7，旧金山：67.9}，
{日期：20120406，纽约：68.0，旧金山：67.4}，
{日期：20120407，纽约：71.1，旧金山：69.4}，
{日期：20120408，纽约：75.7，旧金山：70}，
{日期：20120409，纽约：78.3，旧金山：71.3}，
{日期：20120410，纽约：75.0，旧金山：73.8}，
{日期：20120411，纽约：69.0，旧金山：72.9}，
{日期：20120412，纽约：71.7，旧金山：73.9}，
{日期：20120413，纽约：73.1，旧金山：70.2}，
{日期：20120414，纽约：75.2，旧金山：70.9}，
{日期：20120415，纽约：82.3，旧金山：71.5}，
{日期：20120416，纽约：82.9，旧金山：71.9}，
{日期：20120417，纽约：89.3，旧金山：73.2}，
{日期：20120418，纽约：79.0，旧金山：73}，
{日期：20120419，纽约：74.1，旧金山：75.1}，
{日期：20120420，纽约：76.5，旧金山：75.8}，
{日期：20120421，纽约：78.2，旧金山：78}，
{日期：20120422，纽约：72.4，旧金山：72.8}，
{日期：20120423，纽约：71.6，旧金山：75.1}，
{日期：20120424，纽约：69.3，旧金山：77.9}，
{日期：20120425，纽约：72.5，旧金山：77.5}，
{日期：20120426，纽约：70.5，旧金山：75.3}，
{日期：20120427，纽约：71.9，旧金山：73.5}，
{日期：20120428，纽约：67.4，旧金山：74.7}，
{日期：20120429，纽约：74.1，旧金山：74}，
{日期：20120430，纽约：71.9，旧金山：73.4}，
{日期：20120501，纽约：77.4，旧金山：72.7}，
{日期：20120502，纽约：73.7，旧金山：70.7}，
{日期：20120503，纽约：73.1，旧金山：72.6}，
{日期：20120504，纽约：77.2，旧金山：73.4}，
{日期：20120505，纽约：77.0，旧金山：73.1}，
{日期：20120506，纽约：76.6，旧金山：76.5}，
{日期：20120507，纽约：74.6，旧金山：75.3}，
{日期：20120508，纽约：77.9，旧金山：72}，
{日期：20120509，纽约：79.2，旧金山：72.4}，
{日期：20120510，纽约：81.1，旧金山：73.4}，
{日期：20120511，纽约：79.7，旧金山：73.1}，
{日期：20120512，纽约：84.1，旧金山：69.9}，
{日期：20120513，纽约：85.3，旧金山：72}，
{日期：20120514，纽约：84.2，旧金山：76}，
{日期：20120515，纽约：82.0，旧金山：73}，
{日期：20120516，纽约：83.8，旧金山：71}，
{日期：20120517，纽约：84.5，旧金山：71.4}，
{日期：20120518，纽约：81.0，旧金山：72.2}，
{日期：20120519，纽约：82.6，旧金山：72.4}，
{日期：20120520，纽约：86.2，旧金山：74.5}，
{日期：20120521，纽约：82.7，旧金山：72.8}，
{日期：20120522，纽约：83.7，旧金山：73.9}，
{日期：20120523，纽约：86.4，旧金山：76.5}，
{日期：20120524，纽约：84.5，旧金山：74.7}，
{日期：20120525，纽约：85.4，旧金山：72.5}，
{日期：20120526，纽约：89.4，旧金山：72.1}，
{日期：20120527，纽约：91.9，旧金山：72.2}，
{日期：20120528，纽约：94.4，旧金山：72.9}，
{日期：20120529，纽约：95.9，旧金山：72.1}，
{日期：20120530，纽约：92.9，旧金山：72.1}，
{日期：20120531，纽约：92.5，旧金山：73.3}，
{日期：20120601，纽约：87.2，旧金山：74.8}，
{日期：20120602，纽约：88.3，旧金山：74}，
{日期：20120603，纽约：87.7，旧金山：72.3}，
{日期：20120604，纽约：81.9，旧金山：75.3}，
{日期：20120605，纽约：78.3，旧金山：73.5}，
{日期：20120606，纽约：81.7，旧金山：74.1}，
{日期：20120607，纽约：86.7，旧金山：73.9}，
{日期：20120608，纽约：88.7，旧金山：74.4}，
{日期：20120609，纽约：92.2，旧金山：75}，
{日期：20120610，纽约：92.6，旧金山：80}，
{日期：20120611，纽约：89.2，旧金山：77.2}，
{日期：20120612，纽约：86.9，旧金山：75.1}，
{日期：20120613，纽约：86.7，旧金山：73.3}，
{日期：20120614，纽约：87.7，旧金山：73.4}，
{日期：20120615，纽约：88.5，旧金山：74.6}，
{日期：20120616，纽约：87.5，旧金山：77}，
{日期：20120617，纽约：84.2，旧金山：75.6}，
{日期：20120618，纽约：81.7，旧金山：72.5}，
{日期：20120619，纽约：86.4，旧金山：73.9}，
{日期：20120620，纽约：97.9，旧金山：75.3}，
{日期：20120621，纽约：108.0，旧金山：73.3}，
{日期：20120622，纽约：102.0，旧金山：74.1}，
{日期：20120623，纽约：97.0，旧金山：75.2}，
{日期：20120624，纽约：95.4，旧金山：75.8}，
{日期：20120625，纽约：90.9，旧金山：76.8}，
{日期：20120626，纽约：85.9，旧金山：77.5}，
{日期：20120627，纽约：93.5，旧金山：77.7}，
{日期：20120628，纽约：97.4，旧金山：76.6}，
{日期：20120629，纽约：99.6，旧金山：76.4}，
{日期：20120630，纽约：104.0，旧金山：78.4}，
{日期：20120701，纽约：101.0，旧金山：78.8}，
{日期：20120702，纽约：102.0，旧金山：76.4}，
{日期：20120703，纽约：100.0，旧金山：76.5}，
{日期：20120704，纽约：97.8，旧金山：75.8}，
{日期：20120705，纽约：106.0，旧金山：74.8}，
{日期：20120706，纽约：99.9，旧金山：74.9}，
{日期：20120707，纽约：103.0，旧金山：74.7}，
{日期：20120708，纽约：101.0，旧金山：72.8}，
{日期：20120709，纽约：97.8，旧金山：73.7}，
{日期：20120710，纽约：96.1，旧金山：73.1}，
{日期：20120711，纽约：96.3，旧金山：72.7}，
{日期：20120712，纽约：95.8，旧金山：72}，
{日期：20120713，纽约：97.2，旧金山：73.4}，
{日期：20120714，纽约：99.3，旧金山：74}，
{日期：20120715，纽约：98.9，旧金山：74}，
{日期：20120716，纽约：99.6，旧金山：74.5}，
{日期：20120717，纽约：103.0，旧金山：76.7}，
{日期：20120718，纽约：104.0，旧金山：77.5}，
{日期：20120719，纽约：95.1，旧金山：77.1}，
{日期：20120720，纽约：88.4，旧金山：78.1}，
{日期：20120721，纽约：88.4，旧金山：77.6}，
{日期：20120722，纽约：92.2，旧金山：76}，
{日期：20120723，纽约：95.6，旧金山：76.6}，
{日期：20120724，纽约：102.0，旧金山：77.8}，
{日期：20120725，纽约：98.4，旧金山：77.5}，
{日期：20120726，纽约：97.0，旧金山：76.4}，
{日期：20120727，纽约：99.4，旧金山：75.3}，
{日期：20120728，纽约：97.4，旧金山：75}，
{日期：20120729，纽约：92.5，旧金山：75.6}，
{日期：20120730，纽约：92.9，旧金山：75.6}，
{日期：20120731，纽约：93.6，旧金山：75.9}，
{日期：20120801，纽约：95.0，旧金山：75.4}，
{日期：20120802，纽约：97.7，旧金山：74.4}，
{日期：20120803，纽约：99.7，旧金山：73.7}，
{日期：20120804，纽约：99.6，旧金山：74.1}，
{日期：20120805，纽约：101.0，旧金山：77.8}，
{日期：20120806，纽约：100.0，旧金山：78.2}，
{日期：20120807，纽约：95.7，旧金山：78}，
{日期：20120808，纽约：97.8，旧金山：77}，
{日期：20120809，纽约：98.6，旧金山：75}，
{日期：20120810，纽约：97.8，旧金山：74.8}，
{日期：20120811，纽约：98.5，旧金山：73}，
{日期：20120812，纽约：98.8，旧金山：72.5}，
{日期：20120813，纽约：98.6，旧金山：73.3}，
{日期：20120814，纽约：96.8，旧金山：73.9}，
{日期：20120815，纽约：96.7，旧金山：76.2}，
{日期：20120816，纽约：95.9，旧金山：77.1}，
{日期：20120817，纽约：97.6，旧金山：75.3}，
{日期：20120818，纽约：92.6，旧金山：76.2}，
{日期：20120819，纽约：90.4，旧金山：74.3}，
{日期：20120820，纽约：91.8，旧金山：73.1}，
{日期：20120821，纽约：93.6，旧金山：73.4}，
{日期：20120822，纽约：94.7，旧金山：74.5}，
{日期：20120823，纽约：94.6，旧金山：75.7}，
{日期：20120824，纽约：96.0，旧金山：74.8}，
{日期：20120825，纽约：96.2，旧金山：73.8}，
{日期：20120826，纽约：93.4，旧金山：76.5}，
{日期：20120827，纽约：94.6，旧金山：78.3}，
{日期：20120828，纽约：99.4，旧金山：78.7}，
{日期：20120829，纽约：94.7，旧金山：77.5}，
{日期：20120830，纽约：93.5，旧金山：75.9}，
{日期：20120831，纽约：97.9，旧金山：75.4}，
{日期：20120901，纽约：100.0，旧金山：75.7}，
{日期：20120902，纽约：95.1，旧金山：73.1}，
{日期：20120903，纽约：93.5，旧金山：73.5}，
{日期：20120904，纽约：93.5，旧金山：72.5}，
{日期：20120905，纽约：97.7，旧金山：74.5}，
{日期：20120906，纽约：94.2，旧金山：76.3}，
{日期：20120907，纽约：96.0，旧金山：76.4}，
{日期：20120908，纽约：97.1，旧金山：76.5}，
{日期：20120909，纽约：89.7，旧金山：76.4}，
{日期：20120910，纽约：87.8，旧金山：75.4}，
{日期：20120911，纽约：84.0，旧金山：76.2}，
{日期：20120912，纽约：88.1，旧金山：75.7}，
{日期：20120913，纽约：89.3，旧金山：74.3}，
{日期：20120914，纽约：90.0，旧金山：75.2}，
{日期：20120915，纽约：89.3，旧金山：74.3}，
{日期：20120916，纽约：86.3，旧金山：72.9}，
{日期：20120917，纽约：87.0，旧金山：74.8}，
{日期：20120918，纽约：92.8，旧金山：74.8}，
{日期：20120919，纽约：87.2，旧金山：76.8}，
{日期：20120920，纽约：82.1，旧金山：75.4}，
{日期：20120921，纽约：84.0，旧金山：75.8}，
{日期：20120922，纽约：85.5，旧金山：75.9}，
{日期：20120923，纽约：85.7，旧金山：72.8}，
{日期：20120924，纽约：80.4，旧金山：74.5}，
{日期：20120925，纽约：83.2，旧金山：73.3}，
{日期：20120926，纽约：88.5，旧金山：73.6}，
{日期：20120927，纽约：89.2，旧金山：72.1}，
{日期：20120928，纽约：88.7，旧金山：72.6}，
{日期：20120929，纽约：82.5，旧金山：73.9}，
{日期：20120930，纽约：82.3，旧金山：75.1}]}
解决方案
问题是嵌套在数据元素中的所有数据。您需要更新code，以反映这一点。具体而言，线
x.domain（d3.extent（数据，功能（D）{返回d.date;}））;
y.domain（[
d3.min（数据，功能（D）{返回Math.min（D [纽约]，D [旧金山]）;}）
d3.max（数据，功能（D）{返回Math.max（D [纽约]，D [旧金山]）;}）
]）;
svg.datum（数据）;
需要改为
x.domain（d3.extent（数据。数据，功能（D）{返回d.date;}））;
y.domain（[
d3.min（数据。数据，功能（D）{返回Math.min（D [纽约]，D [旧金山]）;}）
d3.max（数据。数据，功能（D）{返回Math.max（D [纽约]，D [旧金山]）;}）
]）;
svg.datum（数据。数据）;
I have been struggling to get this example:
http://bl.ocks.org/mbostock/3894205
...to work with json so I can use it in a portlet with live data. I can see the data elements if I do an alert but the component isn't rendering. I only get the y axis and its label to show up.
The part that may be wrong is:
d3.json("data.json", function(error, data) {
if(error) return console.warn(error);
data.data.forEach(function(d) {
d.date = parseDate(d.date);
d["San Francisco"]= +d["San Francisco"];
d["New York"] = +d["New York"];
count++;
if (count>360) {
alert(d.date + " " + d["San Francisco"] + " " + d["New York"]);
}
});
taken from the html file
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.area.above {
fill: rgb(252,141,89);
}
.area.below {
fill: rgb(145,207,96);
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d["New York"]); });
var area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y1(function(d) { return y(d["New York"]); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var count =0;
d3.json("data.json", function(error, data) {
if(error) return console.warn(error);
data.data.forEach(function(d) {
d.date = parseDate(d.date);
d["San Francisco"]= +d["San Francisco"];
d["New York"] = +d["New York"];
count++;
if (count>360) {
alert(d.date + " " + d["San Francisco"] + " " + d["New York"]);
}
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(data, function(d) { return Math.min(d["New York"], d["San Francisco"]); }),
d3.max(data, function(d) { return Math.max(d["New York"], d["San Francisco"]); })
]);
svg.datum(data);
svg.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", area.y0(height));
svg.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", area.y0(0));
svg.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", area.y0(function(d) { return y(d["San Francisco"]); }));
svg.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", area);
svg.append("path")
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
});
</script>
using the following data.json file
{"data":[
{"date":"20111001","New York":83.4,"San Francisco":82.7},
{"date":"20111002","New York":78.1,"San Francisco":79.9},
{"date":"20111003","New York":73.3,"San Francisco":79.1},
{"date":"20111004","New York":75.7,"San Francisco":78.8},
{"date":"20111005","New York":84.2,"San Francisco":78.7},
{"date":"20111006","New York":78.8,"San Francisco":77},
{"date":"20111007","New York":77.9,"San Francisco":76.7},
{"date":"20111008","New York":81.8,"San Francisco":76.8},
{"date":"20111009","New York":89.3,"San Francisco":76.7},
{"date":"20111010","New York":91.2,"San Francisco":80.1},
{"date":"20111011","New York":88.7,"San Francisco":81.1},
{"date":"20111012","New York":81.8,"San Francisco":81.5},
{"date":"20111013","New York":83.1,"San Francisco":84.3},
{"date":"20111014","New York":86.9,"San Francisco":87.1},
{"date":"20111015","New York":81.7,"San Francisco":84.6},
{"date":"20111016","New York":81.8,"San Francisco":81.6},
{"date":"20111017","New York":82.8,"San Francisco":81.1},
{"date":"20111018","New York":80.8,"San Francisco":79.2},
{"date":"20111019","New York":82.1,"San Francisco":78.9},
{"date":"20111020","New York":85.1,"San Francisco":77.2},
{"date":"20111021","New York":75.6,"San Francisco":76.4},
{"date":"20111022","New York":74.4,"San Francisco":80.7},
{"date":"20111023","New York":74.4,"San Francisco":85.1},
{"date":"20111024","New York":74.8,"San Francisco":80.9},
{"date":"20111025","New York":77.9,"San Francisco":76.1},
{"date":"20111026","New York":74.6,"San Francisco":74.6},
{"date":"20111027","New York":74.4,"San Francisco":76.1},
{"date":"20111028","New York":62.5,"San Francisco":78.1},
{"date":"20111029","New York":60.9,"San Francisco":77.5},
{"date":"20111030","New York":58.6,"San Francisco":77.7},
{"date":"20111031","New York":64.2,"San Francisco":75.1},
{"date":"20111101","New York":69.6,"San Francisco":77.9},
{"date":"20111102","New York":67.2,"San Francisco":84.6},
{"date":"20111103","New York":70.1,"San Francisco":76.2},
{"date":"20111104","New York":70.1,"San Francisco":70.5},
{"date":"20111105","New York":63.5,"San Francisco":71.3},
{"date":"20111106","New York":63.8,"San Francisco":72.6},
{"date":"20111107","New York":68.9,"San Francisco":71.4},
{"date":"20111108","New York":75.5,"San Francisco":70.6},
{"date":"20111109","New York":73.7,"San Francisco":74.6},
{"date":"20111110","New York":77.7,"San Francisco":75.6},
{"date":"20111111","New York":68.5,"San Francisco":73.9},
{"date":"20111112","New York":66.8,"San Francisco":74},
{"date":"20111113","New York":71.1,"San Francisco":73.8},
{"date":"20111114","New York":76.8,"San Francisco":73.5},
{"date":"20111115","New York":79.7,"San Francisco":73.4},
{"date":"20111116","New York":76.5,"San Francisco":72.2},
{"date":"20111117","New York":69.6,"San Francisco":72.7},
{"date":"20111118","New York":61.5,"San Francisco":73.1},
{"date":"20111119","New York":64.3,"San Francisco":69},
{"date":"20111120","New York":74.1,"San Francisco":70.4},
{"date":"20111121","New York":74.1,"San Francisco":71.1},
{"date":"20111122","New York":69.4,"San Francisco":72.3},
{"date":"20111123","New York":70.1,"San Francisco":74.6},
{"date":"20111124","New York":64.1,"San Francisco":75.1},
{"date":"20111125","New York":70.3,"San Francisco":71.5},
{"date":"20111126","New York":72.1,"San Francisco":73.6},
{"date":"20111127","New York":69.6,"San Francisco":72.3},
{"date":"20111128","New York":77.2,"San Francisco":71},
{"date":"20111129","New York":79.1,"San Francisco":69.5},
{"date":"20111130","New York":70.6,"San Francisco":69.8},
{"date":"20111201","New York":64.3,"San Francisco":80.4},
{"date":"20111202","New York":63.9,"San Francisco":82.2},
{"date":"20111203","New York":62.1,"San Francisco":78.3},
{"date":"20111204","New York":63.9,"San Francisco":72.7},
{"date":"20111205","New York":70.2,"San Francisco":71.5},
{"date":"20111206","New York":74.2,"San Francisco":69.9},
{"date":"20111207","New York":74.6,"San Francisco":68.6},
{"date":"20111208","New York":63.4,"San Francisco":66.4},
{"date":"20111209","New York":62.2,"San Francisco":69.8},
{"date":"20111210","New York":65.1,"San Francisco":72.1},
{"date":"20111211","New York":53.8,"San Francisco":68.8},
{"date":"20111212","New York":56.8,"San Francisco":67.4},
{"date":"20111213","New York":58.6,"San Francisco":67.2},
{"date":"20111214","New York":61.9,"San Francisco":66.1},
{"date":"20111215","New York":69.6,"San Francisco":68.8},
{"date":"20111216","New York":70.2,"San Francisco":67.9},
{"date":"20111217","New York":60.6,"San Francisco":69.8},
{"date":"20111218","New York":49.1,"San Francisco":69.1},
{"date":"20111219","New York":53.7,"San Francisco":68.3},
{"date":"20111220","New York":65.8,"San Francisco":69.3},
{"date":"20111221","New York":67.4,"San Francisco":68.4},
{"date":"20111222","New York":74.4,"San Francisco":73.3},
{"date":"20111223","New York":67.8,"San Francisco":67.5},
{"date":"20111224","New York":54.9,"San Francisco":67.9},
{"date":"20111225","New York":55.9,"San Francisco":68.9},
{"date":"20111226","New York":63.6,"San Francisco":65.9},
{"date":"20111227","New York":62.9,"San Francisco":67.2},
{"date":"20111228","New York":66.2,"San Francisco":68.9},
{"date":"20111229","New York":50.8,"San Francisco":70.9},
{"date":"20111230","New York":60.8,"San Francisco":72.9},
{"date":"20111231","New York":69.8,"San Francisco":70.1},
{"date":"20120101","New York":66.3,"San Francisco":73.9},
{"date":"20120102","New York":63.2,"San Francisco":73.1},
{"date":"20120103","New York":50.3,"San Francisco":69.7},
{"date":"20120104","New York":39.2,"San Francisco":72.7},
{"date":"20120105","New York":52.1,"San Francisco":72.6},
{"date":"20120106","New York":61.2,"San Francisco":69},
{"date":"20120107","New York":67.1,"San Francisco":71},
{"date":"20120108","New York":66.1,"San Francisco":76.8},
{"date":"20120109","New York":54.7,"San Francisco":72.3},
{"date":"20120110","New York":59.4,"San Francisco":71.6},
{"date":"20120111","New York":60.4,"San Francisco":69.8},
{"date":"20120112","New York":65.4,"San Francisco":71.9},
{"date":"20120113","New York":60.7,"San Francisco":73.7},
{"date":"20120114","New York":50.4,"San Francisco":72.9},
{"date":"20120115","New York":43.9,"San Francisco":69.7},
{"date":"20120116","New York":42.6,"San Francisco":65.3},
{"date":"20120117","New York":59.8,"San Francisco":63.6},
{"date":"20120118","New York":63.2,"San Francisco":65},
{"date":"20120119","New York":46.3,"San Francisco":67.3},
{"date":"20120120","New York":52.8,"San Francisco":71.4},
{"date":"20120121","New York":47.4,"San Francisco":73.7},
{"date":"20120122","New York":45.1,"San Francisco":68.3},
{"date":"20120123","New York":59.4,"San Francisco":72.9},
{"date":"20120124","New York":68.7,"San Francisco":69.1},
{"date":"20120125","New York":63.1,"San Francisco":72.1},
{"date":"20120126","New York":57.1,"San Francisco":73.6},
{"date":"20120127","New York":68.2,"San Francisco":70.4},
{"date":"20120128","New York":63.7,"San Francisco":70.3},
{"date":"20120129","New York":60.1,"San Francisco":73.8},
{"date":"20120130","New York":58.0,"San Francisco":71.9},
{"date":"20120131","New York":63.5,"San Francisco":70},
{"date":"20120201","New York":70.4,"San Francisco":70},
{"date":"20120202","New York":65.8,"San Francisco":71.3},
{"date":"20120203","New York":57.5,"San Francisco":71.5},
{"date":"20120204","New York":60.8,"San Francisco":72},
{"date":"20120205","New York":56.5,"San Francisco":73.8},
{"date":"20120206","New York":59.1,"San Francisco":74.6},
{"date":"20120207","New York":63.2,"San Francisco":74.3},
{"date":"20120208","New York":56.5,"San Francisco":71.9},
{"date":"20120209","New York":56.5,"San Francisco":73.8},
{"date":"20120210","New York":58.3,"San Francisco":73.9},
{"date":"20120211","New York":56.9,"San Francisco":72.3},
{"date":"20120212","New York":49.7,"San Francisco":70.1},
{"date":"20120213","New York":53.1,"San Francisco":69.5},
{"date":"20120214","New York":59.6,"San Francisco":68.6},
{"date":"20120215","New York":62.3,"San Francisco":69.9},
{"date":"20120216","New York":59.7,"San Francisco":72.4},
{"date":"20120217","New York":66.0,"San Francisco":69.9},
{"date":"20120218","New York":61.2,"San Francisco":71.6},
{"date":"20120219","New York":59.8,"San Francisco":67.8},
{"date":"20120220","New York":58.1,"San Francisco":68.7},
{"date":"20120221","New York":57.1,"San Francisco":69.7},
{"date":"20120222","New York":65.5,"San Francisco":73.4},
{"date":"20120223","New York":70.6,"San Francisco":74.1},
{"date":"20120224","New York":62.7,"San Francisco":75.9},
{"date":"20120225","New York":62.6,"San Francisco":71.7},
{"date":"20120226","New York":56.9,"San Francisco":67.7},
{"date":"20120227","New York":60.9,"San Francisco":65.4},
{"date":"20120228","New York":65.9,"San Francisco":67},
{"date":"20120229","New York":60.7,"San Francisco":69.8},
{"date":"20120301","New York":61.3,"San Francisco":68.9},
{"date":"20120302","New York":56.8,"San Francisco":68.1},
{"date":"20120303","New York":67.6,"San Francisco":70.7},
{"date":"20120304","New York":64.2,"San Francisco":75},
{"date":"20120305","New York":58.5,"San Francisco":68.8},
{"date":"20120306","New York":52.9,"San Francisco":68.4},
{"date":"20120307","New York":63.3,"San Francisco":69.9},
{"date":"20120308","New York":71.2,"San Francisco":69.2},
{"date":"20120309","New York":67.8,"San Francisco":71.7},
{"date":"20120310","New York":57.2,"San Francisco":69.3},
{"date":"20120311","New York":62.9,"San Francisco":70},
{"date":"20120312","New York":68.8,"San Francisco":68.6},
{"date":"20120313","New York":72.6,"San Francisco":73.9},
{"date":"20120314","New York":80.5,"San Francisco":75.2},
{"date":"20120315","New York":67.2,"San Francisco":75.9},
{"date":"20120316","New York":64.7,"San Francisco":74.6},
{"date":"20120317","New York":68.2,"San Francisco":68.2},
{"date":"20120318","New York":68.2,"San Francisco":67.1},
{"date":"20120319","New York":73.1,"San Francisco":65.8},
{"date":"20120320","New York":77.8,"San Francisco":69.7},
{"date":"20120321","New York":77.5,"San Francisco":71.4},
{"date":"20120322","New York":77.3,"San Francisco":71.4},
{"date":"20120323","New York":81.7,"San Francisco":68.4},
{"date":"20120324","New York":75.8,"San Francisco":69},
{"date":"20120325","New York":68.4,"San Francisco":66.4},
{"date":"20120326","New York":69.8,"San Francisco":69.7},
{"date":"20120327","New York":59.6,"San Francisco":74.1},
{"date":"20120328","New York":69.7,"San Francisco":74.6},
{"date":"20120329","New York":76.8,"San Francisco":72.3},
{"date":"20120330","New York":66.5,"San Francisco":74.5},
{"date":"20120331","New York":62.2,"San Francisco":76.2},
{"date":"20120401","New York":65.3,"San Francisco":71.1},
{"date":"20120402","New York":68.1,"San Francisco":70.5},
{"date":"20120403","New York":71.2,"San Francisco":72.2},
{"date":"20120404","New York":81.0,"San Francisco":70.6},
{"date":"20120405","New York":70.7,"San Francisco":67.9},
{"date":"20120406","New York":68.0,"San Francisco":67.4},
{"date":"20120407","New York":71.1,"San Francisco":69.4},
{"date":"20120408","New York":75.7,"San Francisco":70},
{"date":"20120409","New York":78.3,"San Francisco":71.3},
{"date":"20120410","New York":75.0,"San Francisco":73.8},
{"date":"20120411","New York":69.0,"San Francisco":72.9},
{"date":"20120412","New York":71.7,"San Francisco":73.9},
{"date":"20120413","New York":73.1,"San Francisco":70.2},
{"date":"20120414","New York":75.2,"San Francisco":70.9},
{"date":"20120415","New York":82.3,"San Francisco":71.5},
{"date":"20120416","New York":82.9,"San Francisco":71.9},
{"date":"20120417","New York":89.3,"San Francisco":73.2},
{"date":"20120418","New York":79.0,"San Francisco":73},
{"date":"20120419","New York":74.1,"San Francisco":75.1},
{"date":"20120420","New York":76.5,"San Francisco":75.8},
{"date":"20120421","New York":78.2,"San Francisco":78},
{"date":"20120422","New York":72.4,"San Francisco":72.8},
{"date":"20120423","New York":71.6,"San Francisco":75.1},
{"date":"20120424","New York":69.3,"San Francisco":77.9},
{"date":"20120425","New York":72.5,"San Francisco":77.5},
{"date":"20120426","New York":70.5,"San Francisco":75.3},
{"date":"20120427","New York":71.9,"San Francisco":73.5},
{"date":"20120428","New York":67.4,"San Francisco":74.7},
{"date":"20120429","New York":74.1,"San Francisco":74},
{"date":"20120430","New York":71.9,"San Francisco":73.4},
{"date":"20120501","New York":77.4,"San Francisco":72.7},
{"date":"20120502","New York":73.7,"San Francisco":70.7},
{"date":"20120503","New York":73.1,"San Francisco":72.6},
{"date":"20120504","New York":77.2,"San Francisco":73.4},
{"date":"20120505","New York":77.0,"San Francisco":73.1},
{"date":"20120506","New York":76.6,"San Francisco":76.5},
{"date":"20120507","New York":74.6,"San Francisco":75.3},
{"date":"20120508","New York":77.9,"San Francisco":72},
{"date":"20120509","New York":79.2,"San Francisco":72.4},
{"date":"20120510","New York":81.1,"San Francisco":73.4},
{"date":"20120511","New York":79.7,"San Francisco":73.1},
{"date":"20120512","New York":84.1,"San Francisco":69.9},
{"date":"20120513","New York":85.3,"San Francisco":72},
{"date":"20120514","New York":84.2,"San Francisco":76},
{"date":"20120515","New York":82.0,"San Francisco":73},
{"date":"20120516","New York":83.8,"San Francisco":71},
{"date":"20120517","New York":84.5,"San Francisco":71.4},
{"date":"20120518","New York":81.0,"San Francisco":72.2},
{"date":"20120519","New York":82.6,"San Francisco":72.4},
{"date":"20120520","New York":86.2,"San Francisco":74.5},
{"date":"20120521","New York":82.7,"San Francisco":72.8},
{"date":"20120522","New York":83.7,"San Francisco":73.9},
{"date":"20120523","New York":86.4,"San Francisco":76.5},
{"date":"20120524","New York":84.5,"San Francisco":74.7},
{"date":"20120525","New York":85.4,"San Francisco":72.5},
{"date":"20120526","New York":89.4,"San Francisco":72.1},
{"date":"20120527","New York":91.9,"San Francisco":72.2},
{"date":"20120528","New York":94.4,"San Francisco":72.9},
{"date":"20120529","New York":95.9,"San Francisco":72.1},
{"date":"20120530","New York":92.9,"San Francisco":72.1},
{"date":"20120531","New York":92.5,"San Francisco":73.3},
{"date":"20120601","New York":87.2,"San Francisco":74.8},
{"date":"20120602","New York":88.3,"San Francisco":74},
{"date":"20120603","New York":87.7,"San Francisco":72.3},
{"date":"20120604","New York":81.9,"San Francisco":75.3},
{"date":"20120605","New York":78.3,"San Francisco":73.5},
{"date":"20120606","New York":81.7,"San Francisco":74.1},
{"date":"20120607","New York":86.7,"San Francisco":73.9},
{"date":"20120608","New York":88.7,"San Francisco":74.4},
{"date":"20120609","New York":92.2,"San Francisco":75},
{"date":"20120610","New York":92.6,"San Francisco":80},
{"date":"20120611","New York":89.2,"San Francisco":77.2},
{"date":"20120612","New York":86.9,"San Francisco":75.1},
{"date":"20120613","New York":86.7,"San Francisco":73.3},
{"date":"20120614","New York":87.7,"San Francisco":73.4},
{"date":"20120615","New York":88.5,"San Francisco":74.6},
{"date":"20120616","New York":87.5,"San Francisco":77},
{"date":"20120617","New York":84.2,"San Francisco":75.6},
{"date":"20120618","New York":81.7,"San Francisco":72.5},
{"date":"20120619","New York":86.4,"San Francisco":73.9},
{"date":"20120620","New York":97.9,"San Francisco":75.3},
{"date":"20120621","New York":108.0,"San Francisco":73.3},
{"date":"20120622","New York":102.0,"San Francisco":74.1},
{"date":"20120623","New York":97.0,"San Francisco":75.2},
{"date":"20120624","New York":95.4,"San Francisco":75.8},
{"date":"20120625","New York":90.9,"San Francisco":76.8},
{"date":"20120626","New York":85.9,"San Francisco":77.5},
{"date":"20120627","New York":93.5,"San Francisco":77.7},
{"date":"20120628","New York":97.4,"San Francisco":76.6},
{"date":"20120629","New York":99.6,"San Francisco":76.4},
{"date":"20120630","New York":104.0,"San Francisco":78.4},
{"date":"20120701","New York":101.0,"San Francisco":78.8},
{"date":"20120702","New York":102.0,"San Francisco":76.4},
{"date":"20120703","New York":100.0,"San Francisco":76.5},
{"date":"20120704","New York":97.8,"San Francisco":75.8},
{"date":"20120705","New York":106.0,"San Francisco":74.8},
{"date":"20120706","New York":99.9,"San Francisco":74.9},
{"date":"20120707","New York":103.0,"San Francisco":74.7},
{"date":"20120708","New York":101.0,"San Francisco":72.8},
{"date":"20120709","New York":97.8,"San Francisco":73.7},
{"date":"20120710","New York":96.1,"San Francisco":73.1},
{"date":"20120711","New York":96.3,"San Francisco":72.7},
{"date":"20120712","New York":95.8,"San Francisco":72},
{"date":"20120713","New York":97.2,"San Francisco":73.4},
{"date":"20120714","New York":99.3,"San Francisco":74},
{"date":"20120715","New York":98.9,"San Francisco":74},
{"date":"20120716","New York":99.6,"San Francisco":74.5},
{"date":"20120717","New York":103.0,"San Francisco":76.7},
{"date":"20120718","New York":104.0,"San Francisco":77.5},
{"date":"20120719","New York":95.1,"San Francisco":77.1},
{"date":"20120720","New York":88.4,"San Francisco":78.1},
{"date":"20120721","New York":88.4,"San Francisco":77.6},
{"date":"20120722","New York":92.2,"San Francisco":76},
{"date":"20120723","New York":95.6,"San Francisco":76.6},
{"date":"20120724","New York":102.0,"San Francisco":77.8},
{"date":"20120725","New York":98.4,"San Francisco":77.5},
{"date":"20120726","New York":97.0,"San Francisco":76.4},
{"date":"20120727","New York":99.4,"San Francisco":75.3},
{"date":"20120728","New York":97.4,"San Francisco":75},
{"date":"20120729","New York":92.5,"San Francisco":75.6},
{"date":"20120730","New York":92.9,"San Francisco":75.6},
{"date":"20120731","New York":93.6,"San Francisco":75.9},
{"date":"20120801","New York":95.0,"San Francisco":75.4},
{"date":"20120802","New York":97.7,"San Francisco":74.4},
{"date":"20120803","New York":99.7,"San Francisco":73.7},
{"date":"20120804","New York":99.6,"San Francisco":74.1},
{"date":"20120805","New York":101.0,"San Francisco":77.8},
{"date":"20120806","New York":100.0,"San Francisco":78.2},
{"date":"20120807","New York":95.7,"San Francisco":78},
{"date":"20120808","New York":97.8,"San Francisco":77},
{"date":"20120809","New York":98.6,"San Francisco":75},
{"date":"20120810","New York":97.8,"San Francisco":74.8},
{"date":"20120811","New York":98.5,"San Francisco":73},
{"date":"20120812","New York":98.8,"San Francisco":72.5},
{"date":"20120813","New York":98.6,"San Francisco":73.3},
{"date":"20120814","New York":96.8,"San Francisco":73.9},
{"date":"20120815","New York":96.7,"San Francisco":76.2},
{"date":"20120816","New York":95.9,"San Francisco":77.1},
{"date":"20120817","New York":97.6,"San Francisco":75.3},
{"date":"20120818","New York":92.6,"San Francisco":76.2},
{"date":"20120819","New York":90.4,"San Francisco":74.3},
{"date":"20120820","New York":91.8,"San Francisco":73.1},
{"date":"20120821","New York":93.6,"San Francisco":73.4},
{"date":"20120822","New York":94.7,"San Francisco":74.5},
{"date":"20120823","New York":94.6,"San Francisco":75.7},
{"date":"20120824","New York":96.0,"San Francisco":74.8},
{"date":"20120825","New York":96.2,"San Francisco":73.8},
{"date":"20120826","New York":93.4,"San Francisco":76.5},
{"date":"20120827","New York":94.6,"San Francisco":78.3},
{"date":"20120828","New York":99.4,"San Francisco":78.7},
{"date":"20120829","New York":94.7,"San Francisco":77.5},
{"date":"20120830","New York":93.5,"San Francisco":75.9},
{"date":"20120831","New York":97.9,"San Francisco":75.4},
{"date":"20120901","New York":100.0,"San Francisco":75.7},
{"date":"20120902","New York":95.1,"San Francisco":73.1},
{"date":"20120903","New York":93.5,"San Francisco":73.5},
{"date":"20120904","New York":93.5,"San Francisco":72.5},
{"date":"20120905","New York":97.7,"San Francisco":74.5},
{"date":"20120906","New York":94.2,"San Francisco":76.3},
{"date":"20120907","New York":96.0,"San Francisco":76.4},
{"date":"20120908","New York":97.1,"San Francisco":76.5},
{"date":"20120909","New York":89.7,"San Francisco":76.4},
{"date":"20120910","New York":87.8,"San Francisco":75.4},
{"date":"20120911","New York":84.0,"San Francisco":76.2},
{"date":"20120912","New York":88.1,"San Francisco":75.7},
{"date":"20120913","New York":89.3,"San Francisco":74.3},
{"date":"20120914","New York":90.0,"San Francisco":75.2},
{"date":"20120915","New York":89.3,"San Francisco":74.3},
{"date":"20120916","New York":86.3,"San Francisco":72.9},
{"date":"20120917","New York":87.0,"San Francisco":74.8},
{"date":"20120918","New York":92.8,"San Francisco":74.8},
{"date":"20120919","New York":87.2,"San Francisco":76.8},
{"date":"20120920","New York":82.1,"San Francisco":75.4},
{"date":"20120921","New York":84.0,"San Francisco":75.8},
{"date":"20120922","New York":85.5,"San Francisco":75.9},
{"date":"20120923","New York":85.7,"San Francisco":72.8},
{"date":"20120924","New York":80.4,"San Francisco":74.5},
{"date":"20120925","New York":83.2,"San Francisco":73.3},
{"date":"20120926","New York":88.5,"San Francisco":73.6},
{"date":"20120927","New York":89.2,"San Francisco":72.1},
{"date":"20120928","New York":88.7,"San Francisco":72.6},
{"date":"20120929","New York":82.5,"San Francisco":73.9},
{"date":"20120930","New York":82.3,"San Francisco":75.1}]}
解决方案
The problem is that all your data is nested in a data element. You need to update the code to reflect that. Specifically, the lines
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(data, function(d) { return Math.min(d["New York"], d["San Francisco"]); }),
d3.max(data, function(d) { return Math.max(d["New York"], d["San Francisco"]); })
]);
svg.datum(data);
need to be changed to
x.domain(d3.extent(data.data, function(d) { return d.date; }));
y.domain([
d3.min(data.data, function(d) { return Math.min(d["New York"], d["San Francisco"]); }),
d3.max(data.data, function(d) { return Math.max(d["New York"], d["San Francisco"]); })
]);
svg.datum(data.data);
这篇关于如何将d3.js差异图的例子有工作的JSON数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
