Fatal编程技术网
  • d3.js/
  • 是否可以在Excel外接程序中使用D3.js使外接程序中的图表更具反应性？

是否可以在Excel外接程序中使用D3.js使外接程序中的图表更具反应性？

d3.js office-js

是否可以在Excel外接程序中使用D3.js使外接程序中的图表更具反应性？,d3.js,data-visualization,office-js,excel-addins,D3.js,Data Visualization,Office Js,Excel Addins,我想将以下代码合并到外接程序中。有可能吗？下面的代码取自一个用于创建响应图的交互式小倍数的博客 <!DOCTYPE html> <!-- include polyfills for custom event, Symbol and Custom Elements --> <script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script> <s

我想将以下代码合并到外接程序中。有可能吗？下面的代码取自一个用于创建响应图的交互式小倍数的博客

<!DOCTYPE html>
<!-- include polyfills for custom event, Symbol and Custom Elements -->
<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>

<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="//unpkg.com/d3@5.5.0"></script>
<script src="//unpkg.com/d3fc@14.0.44"></script>

<style>
  body {
    font: 12px sans-serif;
  }
  .area {
    fill: #cec6b9;
  }
  #small-multiples > div {
    display: inline-block;
    height: 185px;
    width: 50%
  }  
  @media (min-width: 600px) {
    #small-multiples > div {
      width: 33%
    }
  }
  @media (min-width: 800px) {
    #small-multiples > div {
      width: 25%
    }
  }
  @media (min-width: 1000px) {
    #small-multiples > div {
      width: 20%
    }
  }
  .tooltip .x-axis .tick {
    display: none;
  }
  .x-axis .domain, .x-axis .tick path,
  .y-axis .domain, .y-axis .tick path {
    display: none;
  }
  .plot-area {
    overflow: visible !important;
  }
  .x-axis {
    height: 1.5em !important;
  }
  .gridline-x {
    stroke: white;
  }
  .point {
    fill: black;
  }
  .point text {
    text-anchor: middle;
    transform: translateY(-10px);
    font-size: 10px;
    stroke: none;
  }
  .bottom-handle {
    text-anchor: middle;
    alignment-baseline: hanging;
    font-size: 10px;
    transform: translateY(1.5em);
  }
  .top-handle {
    display: none;
  }
  .annotation-line line {
    display: none;
  }
</style>

<div id='small-multiples'></div>

<script type='text/babel'>
d3.tsv('askmefi_category_year.tsv', (r) => ({
    category: r.category,
    n: Number(r.n),
    year: Number(r.year)
  }))
  .then((data) => {
    var nested = d3.nest()
        .key(k => k.category)
        .entries(data);
  
    nested.forEach(g => g.trackball = []);
      
    var yExtent = fc.extentLinear()
      .accessors([d => d.n])
        .pad([0, 0.2])
        .include([0]);
  
    var xExtent = fc.extentLinear()
        .accessors([d => d.year]);

    var area = fc.seriesSvgArea()
      .crossValue(d => d.year)
      .mainValue(d => d.n);
  
    var line = fc.seriesSvgLine()
      .crossValue(d => d.year)
      .mainValue(d => d.n);
  
    var gridlines = fc.annotationSvgGridline()
        .xTicks(0)
        .yTicks(3);
  
    var point = fc.seriesSvgPoint()
      .crossValue(d => d.year)
      .mainValue(d => d.value)
        .size(25)
        .decorate((selection) => {
        selection.enter()
            .append('text');        
        selection.select('text')
            .text(d => d.value)
      })
    
    var line = fc.annotationSvgLine()
        .orient('vertical')
      .value(d => d.year)
        .decorate((selection) => {
        selection.enter()
            .select('.bottom-handle')
            .append('text');        
        selection.select('.bottom-handle text')
            .text(d => d.year)
      })
     
  
    var multi = fc.seriesSvgMulti()
        .series([area, line, gridlines, line, point])
      .mapping((data, index, series) => {
        switch (series[index]) {
        case point:            
        case line:
          return data.trackball;
        default:
          return data.values;
        }
      });
  
    var xScale = d3.scaleLinear();
    // create a chart
    var chart = fc.chartCartesian(
        xScale,
        d3.scaleLinear())
      .yDomain(yExtent(data))
        .xDomain(xExtent(data))
        .xLabel(d => d.key)
        .yTicks(3)
        .xTicks(2)
        .xTickFormat(d3.format('0'))
      .yOrient('left')
        .svgPlotArea(multi);
  
    function render() {
      // render
        var container = d3.select('#small-multiples')
      var update = container.selectAll('div.multiple')
        .data(nested);
      update.enter()
        .append('div')
        .classed('multiple', true)
        .merge(update)
        .call(chart)
        .classed('tooltip', d => d.trackball.length);

      // add the pointer component to the plot-area, re-rendering
      // each time the event fires.
      var pointer = fc.pointer()
        .on('point', (event) => {
          // determine the year
          if (event.length) {
            var year = Math.round(xScale.invert(event[0].x));
            // add the point to each series
            nested.forEach((group) => {
              var value = group.values.find(v => v.year === year);
              group.trackball = [{
                year: year,
                value: value.n
              }];
            })
          } else {
            nested.forEach(g => g.trackball = [])
          }
          render();
        });

      d3.selectAll('#small-multiples .plot-area')
        .call(pointer);  
    }
  
    render();
    });
 


</script>


身体{
字体：12px无衬线；
}
.区域{
填写：#cec6b9；
}
#小倍数>div{
显示：内联块；
高度：185px；
宽度：50%
}  
@介质（最小宽度：600px）{
#小倍数>div{
宽度：33%
}
}
@介质（最小宽度：800px）{
#小倍数>div{
宽度：25%
}
}
@介质（最小宽度：1000px）{
#小倍数>div{
宽度：20%
}
}
.工具提示.x轴.勾选{
显示：无；
}
.x轴.domain，.x轴.tick路径，
.y轴.域，.y轴.勾选路径{
显示：无；
}
1.地块面积{
溢出：可见！重要；
}
.x轴{
高度：1.5em！重要；
}
.gridline-x{
笔画：白色；
}
.点{
填充：黑色；
}
.点文本{
文本锚定：中间；
转换：translateY（-10px）；
字体大小：10px；
中风：无；
}
.下把手{
文本锚定：中间；
线形基线：悬挂；
字体大小：10px；
转换：translateY（1.5em）；
}
.上把手{
显示：无；
}
.注释线{
显示：无；
}
d3.tsv（'askmefi\U类别\U年份.tsv'，（r）=>({
类别：r.类别，
n：编号（r.n），
年份：数字（r.年份）
}))
。然后（（数据）=>{
var nested=d3.nest（）
.key（k=>k.category）
.条目（数据）；
nested.forEach（g=>g.trackball=[]）；
var yExtent=fc.extentLinear（）
.accessor（[d=>d.n]）
.pad（[0,0.2]）
。包括（[0]）；
var xExtent=fc.extentLinear（）
.访问者（[d=>d.year]）；
变量区域=fc.seriesSvgArea（）
.交叉值（d=>d.年）
.main值（d=>d.n）；
var line=fc.seriesSvgLine（）
.交叉值（d=>d.年）
.main值（d=>d.n）；
var gridlines=fc.annotationSvgGridline（）
.xTicks（0）
.yTicks（3）；
var point=fc.seriesSvgPoint（）
.交叉值（d=>d.年）
.main值（d=>d.value）
.尺寸（25）
.装饰（（选择）=>{
选择。输入（）
.append（'text'）；
选择。选择（'text'）
.text（d=>d.value）
})
var line=fc.annotationSvgLine（）
.orient（“垂直”）
.价值（d=>d.年）
.装饰（（选择）=>{
选择。输入（）
.select（“.bottom handle”）
.append（'text'）；
选择。选择（“.bottom handle text”）
.text（d=>d.year）
})
var multi=fc.seriesSvgMulti（）
.系列（[面积、线、网格线、线、点]）
.mapping（（数据、索引、系列）=>{
开关（系列[索引]）{
案例点：
案例行：
返回数据.trackball；
违约：
返回数据值；
}
});
var xScale=d3.scaleLinear（）；
//创建图表
var chart=fc.chartCartesian(
xScale，
d3.scaleLinear（））
.yDomain（yExtent（数据））
.xDomain（xExtent（数据））
.xLabel（d=>d.key）
.yTicks（3）
.xTicks（2）
.xTickFormat（d3.format（'0'））
.yOrient（'左'）
.svgPlotArea（多个）；
函数render（）{
//渲染
var container=d3.选择（“#小倍数”）
var update=container.selectAll（'div.multiple'）
.数据（嵌套）；
update.enter（）
.append（'div'））
.classed（'multiple'，true）
.合并（更新）
.电话（图表）
.classed（'tooltip'，d=>d.trackball.length）；
//将指针组件添加到绘图区域，然后重新渲染
//每次事件触发时。
var pointer=fc.pointer（）
.on（'点'，（事件）=>{
//确定年份
if（事件长度）{
var year=Math.round（xScale.invert（事件[0].x））；
//将点添加到每个系列
nested.forEach（（组）=>{
var value=group.values.find（v=>v.year==year）；
group.trackball=[{
年份:年份,，
value:value.n
}];
})
}否则{
nested.forEach（g=>g.trackball=[]）
}
render（）；
});
d3.选择全部（“#小倍数。绘图区域”）
.呼叫（指针）；
}
render（）；
});
这里，很明显，代码导入了一个CSV文件并使用它。office.js是否可以在不导入任何CSV文件的情况下与D3.js一起工作