d3.js差分图示例如何使用json数据？ [英] How would d3.js difference chart example work with json data?

查看：175 发布时间：2017/3/10 18:24:45 ajax json d3.js

本文介绍了d3.js差分图示例如何使用json数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在努力得到这个例子：

http://bl.ocks.org/mbostock/3894205

...使用json，所以我可以在portlet中使用它与实时数据。我可以看到数据元素，如果我做一个警报，但组件不呈现。我只得到y轴和其标签显示。

错误的部分是：

  d3.json （data.json，function（error，data）{
 if（error）return console.warn（error）; 
 data.data.forEach（function（d）{
 .date = parseDate（d.date）; 
d [San Francisco] = + d [San Francisco]; 
d [纽约] = + d [纽约]; 
 count ++; 
 if（count> 360）{
 alert（d.date ++ d [San Francisco] ++ d [New York]）;从html文件中获取的 
} 
}）;

 <！DOCTYPE html> 
< meta charset =utf-8> 
& 
 
 body {
 font：10px sans-serif; 
} 
 
 .axis路径，
 .axis行{
 fill：none; 
 stroke：＃000; 
 shape-rendering：crispEdges; 
} 
 
 .x.axis路径{
 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 （函数（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 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 clip-below）
 .append（path）
 .attr（d，area.y0（height））; 
 
 svg.append ）
 .attr（id，clip-above）
 .append（path）
 .attr（d，area.y0（0））; 
 
 svg.append（path）
 .attr（class，area above）
 .attr（clip-path，url - ））
 .attr（d，area.y0（function（d）{return y（d [San Francisco]）;}））; 
 
 svg.append（path）
 .attr（class，area below）
 .attr（clip-path，url -below））
 .attr（d，area）; 
 
 svg.append（path）
 .attr（class，line）
 .attr（d，line）; 
 
 svg.append（g）
 .attr（class，x axis）
 .attr（transform height +））
 .call（xAxis）; 
 
 svg.append（g）
 .attr（class，y axis）
 .call（yAxis）
 .append ）
 .attr（transform，rotate（-90））
 .attr（y，6）
 .attr（dy，.71em） 
 .style（text-anchor，end）
 .text（Temperature（ºF））; 
}）; 
< / script>

使用以下data.json文件

  {data：[
 {date：20111001，New York：83.4，San Francisco：82.7}，
 {日期：20111002，纽约：78.1，旧金山：79.9}，
 {日期：20111003，纽约：73.3，旧金山：79.1} 
 {date：20111004，New York：75.7，San Francisco：78.8}，
 {date：20111005，New York：84.2， 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} ：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， ：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}日期：20111027，纽约：74.4，旧金山：76.1}，
 {日期：20111028，纽约：62.5，旧金山：78.1} 
 {date：20111029，New York：60.9，San Francisco：77.5}，
 {date：20111030，New York：58.6 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} ：20111112，New York：66.8，San Francisco：74}，
 {date：20111113，New York：71.1，San Francisco：73.8} $ b {date：20111114，New York：76.8，San Francisco：73.5}，
 {date：20111115，New York：79.7， ：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}，
 {日期：20111121，纽约：74.1，旧金山：71.1}，
 {日期：20111122，纽约：69.4，旧金山：72.3} 
 {date：20111123，New York：70.1，San Francisco：74.6}，
 {date：20111124，New York：64.1， 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， ：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.6，San Francisco：66.1}，
 {date：20111215，New York：69.6，日期：20111216，纽约：70.2，旧金山：67.9}，
 {日期：20111217，纽约：60.6，旧金山：69.8} 
 {date：20111218，New York：49.1，San Francisco：69.1}，
 {date：20111219，New York：53.7， 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} ：20120101，New York：66.3，San Francisco：73.9}，
 {date：20120102，New York：63.2，San Francisco：73.1} $ b {date：20120103，New York：50.3，San Francisco：69.7}，
 {date：20120104，New York：39.2， ：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}日期：20120110，纽约：59.4，旧金山：71.6}，
 {日期：20120111，纽约：60.4，旧金山：69.8} 
 {date：20120112，New York：65.4，San Francisco：71.9}，
 {date：20120113，New York：60.7， 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 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} ：20120126，New York：57.1，San Francisco：73.6}，
 {date：20120127，New York：68.2，San Francisco：70.4} $ b {date：20120128，New York：63.7，San Francisco：70.3}，
 {date：20120129，New York：60.1， ：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}日期：20120204，纽约：60.8，旧金山：72}，
 {日期：20120205，纽约：56.5，旧金山：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} ：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， ：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}，
 {日期：20120229，纽约：60.7，旧金山：69.8}，
 {日期：20120301，纽约：61.3，旧金山：68.9} 
 {date：20120302，New York：56.8，San Francisco：68.1}，
 {date：20120303，New York：67.6， 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} ：20120316，New York：64.7，San Francisco：74.6}，
 {date：20120317，New York：68.2，San Francisco：68.2} $ b {date：20120318，New York：68.2，San Francisco：67.1}，
 {date：20120319，New York：73.1， ：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}，
 {日期：20120325，纽约：68.4，旧金山：66.4}，
 {日期：20120326，纽约：69.8，旧金山：69.7} 
 {date：20120327，New York：59.6，San Francisco：74.1}，
 {date：20120328，New York：69.7 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} ：20120410，New York：75.0，San Francisco：73.8}，
 {date：20120411，New York：69.0，San Francisco：72.9} $ b {date：20120412，New York：71.7，San Francisco：73.9}，
 {date：20120413，New York：73.1， ：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，日期：20120419，纽约：74.1，旧金山：75.1}，
 {日期：20120420，纽约：76.5，旧金山：75.8} 
 {date：20120421，New York：78.2，San Francisco：78}，
 {date：20120422，New York：72.4， 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} ：20120505，New York：77.0，San Francisco：73.1}，
 {date：20120506，New York：76.6，San Francisco：76.5} $ b {date：20120507，New York：74.6，San Francisco：75.3}，
 {date：20120508，New York：77.9， ：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}日期：20120514，纽约：84.2，旧金山：76}，
 {日期：20120515 
 {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} ：20120530，New York：92.9，San Francisco：72.1}，
 {date：20120531，New York：92.5，San Francisco：73.3} $ b {date：20120601，New York：87.2，San Francisco：74.8}，
 {date：20120602，New York：88.3， ：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，日期：20120608，纽约：88.7，旧金山：74.4}，
 {日期：20120609，纽约：92.2，旧金山：75} 
 {date：20120610，New York：92.6，San Francisco：80}，
 {date：20120611，New York：89.2 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} ：20120624，New York：95.4，San Francisco：75.8}，
 {date：20120625，New York：90.9，San Francisco：76.8} $ b {date：20120626，New York：85.9，San Francisco：77.5}，
 {date：20120627，New York：93.5， ：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}日期：20120703，纽约：100.0，旧金山：76.5}，
 {日期：20120704，纽约：97.8，旧金山：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} $ b {date：20120721，New York：88.4，San Francisco：77.6}，
 {date：20120722，New York：92.2， ：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}日期：20120728，纽约：97.4，旧金山：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， 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} ：20120813，New York：98.6，San Francisco：73.3}，
 {date：20120814，New York：96.8，San Francisco：73.9} $ b {date：20120815，New York：96.7，San Francisco：76.2}，
 {date：20120816，New York：95.9， ：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}日期：20120822，纽约：94.6，旧金山：74.5}，
 {date：20120823 
 {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} ：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， ：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}日期：20120916，纽约：87.0，旧金山：74.8}，
 
 {date：20120918，New York：92.8，San Francisco：74.8}，
 {date：20120919，New York：87.2， 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}]}

解决方案>
问题是所有的数据嵌套在 data 元素中。您需要更新代码以反映这一点。具体来说，行
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）;
需要更改为
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）;

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屋！

查看全文

d3.js差分图示例如何使用json数据？ [英] How would d3.js difference chart example work with json data?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

d3.js差分图示例如何使用json数据？ [英] How would d3.js difference chart example work with json data?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭