D3.js 使用d3和webView进行本机反应

我试图弄清楚如何添加d3图形来响应本机应用程序。我找到的唯一信息是使用webView，但如果能在github中提供一些有用的示例，我将不胜感激。

我有其他库并创建了本地html文件：

  <WebView source={{uri: 'file:///android_asset/webview.html'}} style={{
      height: 180,
      borderWidth: 2,
      width: 400
    }}></WebView>

在webview.html中，我有：

<script src="Chart.min.js"></script>

<h1>Hellosss</h1>
<canvas id="myChart" width="400" height="400"></canvas>
<script>

var data = {
   labels: ["January", "February", "March", "April", "May", "June", "July"],
   datasets: [
       {
           label: "My First dataset",
           fillColor: "rgba(220,220,220,0.2)",
           strokeColor: "rgba(220,220,220,1)",
           pointColor: "rgba(220,220,220,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(220,220,220,1)",
           data: [65, 59, 80, 81, 56, 55, 40]
       },
       {
           label: "My Second dataset",
           fillColor: "rgba(151,187,205,0.2)",
           strokeColor: "rgba(151,187,205,1)",
           pointColor: "rgba(151,187,205,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(151,187,205,1)",
           data: [28, 48, 40, 19, 86, 27, 90]
       }
   ]
};
var ctx = document.getElementById("myChart").getContext("2d");
myLineChart = new Chart(ctx).Line(data, {
      animation: false,
      scaleBeginAtZero: true });

</script>

海洛斯
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
},
{
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[28,48,40,19,86,27,90]
}
]
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
myLineChart=新图表（ctx）.Line（数据{
动画：错，
scaleBeginAtZero:true}）；

问题目前我发现使用此解决方案无法在本机应用程序和webview之间进行实时更新和双向通信

---

有什么建议吗？我需要传递authToken plus更新的数据，而不是刷新页面。

我用d3制作了一个饼图，但没有使用webview。使用d3生成图表，并将生成的SVG代码放置到形状组件中：

<Surface width={100} height={100} >
  <Group x={50} y={50} >
    <Shape d={'M...Here goes the svg code'} 
            stroke={'#000'} 
            strokeWidth={1} 
            fill={'#FF0000'} />
  </Group>
</Surface>

以下是一个简单的例子：

---

也许使用这种方法，您可以创建实时更新的图表？

您找到解决方案了吗？此时您必须使用webview或IOS/Android组件。web视图的唯一问题是，您无法在web视图和本机应用之间进行桥接，这很糟糕。