web-dev-qa-db-ja.com

Androidアプリ内でインタラクティブな視覚化を作成するためにd3.jsを使用できますか？

Androidアプリ内でインタラクティブな視覚化を作成しようとしています。

視覚化されるデータは、sqliteデータベースにローカルに保存され、視覚化を生成するためにクエリされます。

ネイティブアプリとウェブアプリのどちらを作成するかはまだ決めていません。

私の調査によると、d3.jsはニーズに非常によく適合しているようですが、モバイル環境での使用方法がわかりません。

androidweb-applicationsvisualizationd3.js
21
user2760

WebViewコンポーネントを使用してJavaScriptをAndroidアプリに簡単に埋め込むことができます。または、PhoneGapまたは同様のプラットフォームを使用することもできます。残念ながら、Android 3.0より前は、ネイティブのAndroidブラウザはsvgを表示せず、D3はSVGに基づいているため、Android 2.3（またはそれ以下）では機能しません。 ）ブラウザ。ただし、Firefoxブラウザでは機能します。

もう1つのオプションは、WebViewまたはPhoneGapで InfoVis Toolkit を使用することです。 InfoVis Toolkitは、Androidでより適切に機能するようです。

同等のAndroid視覚化プラットフォームはわかりませんが、D3とその前身であるProtovis、Flare、Prefuseはすべてオープンソースです。そのうちの1つをAndroidに移植してみてください。

関連する質問は次のとおりです。 モバイル用の視覚化ツール（タブレット）

14
Jay Askren

D3を自分のAndroidアプリで このチュートリアル を実行することで動作させました。そこから、チュートリアルのコードをニーズに合わせて簡単に拡張できました。

チュートリアルを少し変更したバージョンを次に示します（ズームコントロールとスケーリングを追加しました）。

  1. JSアセットフォルダーを作成します（ProjectName/app/src/main/assets/js）
  2. D3（ https://d3js.org/ ）をダウンロードし、縮小されたd3.min.jsソースファイルをProjectName/app/src/main/assets/jsにコピーします。
  3. HTMLアセット用のディレクトリを作成します：（ProjectName/app/src/main/assets/html）
  4. ファイルProjectName/app/src/main/assets/html /graph.htmlを作成します。このコードを新しいファイルにコピーします。
<html>
<head>
    <script type="text/javascript" src="file:///Android_asset/js/d3.min.js"></script>
    <script type="text/javascript" src="file:///Android_asset/js/drawGraph.js"></script>
    <meta name="viewport" content="width=device-width, user-scalable=yes" />
</head>

<body>
<svg id="piechart"></svg>
</body>
</html>
  1. D3を実行するJSファイルを作成します：ProjectName/app/src/main/assets/js /drawGraph.js。次のコードを追加します。
function initGraph(dataset, pHeight, pWidth) {
  var height = parseInt(pHeight);
  var width = parseInt(pWidth);        
  var svg = d3.select("#piechart");
  var textLabelSuffix = "%";

  showPieChart(dataset, svg, height, width, 
      textLabelSuffix);
}

function showPieChart(dataset, svg, height, width, 
  textLabelSuffix)
{
  var outerRadius = width / 2;
  var innerRadius = 0;

  // set height/width to match the SVG element
  svg.attr("height", height).attr("width", width);

  // create a new pie layout
  var pie = d3.layout.pie();

  // initialize arcs/wedges to span 
  // the radius of the circle
  var arc = d3.svg.arc()
               .innerRadius(innerRadius)
               .outerRadius(outerRadius);

  // create groups
  var arcs = svg.selectAll("g.arc")   
                // bind dataset to pie layout
                .data(pie(dataset))   
                // create groups
                .enter()              
                // append groups
                .append("g")          
                // create arcs
                .attr("class", "arc") 
                // position each arc in the pie layout
                .attr("transform", "translate(" + 
                 outerRadius + "," + 
                 outerRadius + ")");


  // initialize color scale - refer to
  // https://github.com/mbostock/d3/wiki/Ordinal-Scales
  var color = d3.scale.category10();

  arcs.append("path")
      .attr("fill", function(d,i) { return color(i); })
      .attr("d", arc);

  arcs.append("text")
      .attr("transform", function(d) {
          return "translate(" + arc.centroid(d) + ")";
       })
      .attr("text-anchor", "middle")
      .text(function(d) { return d.value + 
         textLabelSuffix; });
}
  1. D3コードをホストするアクティビティレイアウトを作成します。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical" Android:layout_width="match_parent"
    Android:layout_height="match_parent">
    <WebView
        Android:id="@+id/webview"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@id/tvOutgoing"
        Android:layout_alignParentBottom="true"/>
</RelativeLayout>
  1. アクティビティでWebビューを初期化します。

public class VisualizationActivity extends AppCompatActivity {

private WebView webview;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_visualization);

    // Prepare webview: add zoom controls and start zoomed out
    webview = (WebView) findViewById(R.id.webview);
    final WebSettings webSettings = webview.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setBuiltInZoomControls(true);
    webSettings.setSupportZoom(true);
    webSettings.setUseWideViewPort(true);
    webview.setWebChromeClient(new WebChromeClient());
    webview.setInitialScale(1);

    webview.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            // after the HTML page loads, run JS to initialize graph
            int dataset[] = new int[] {5,10,15,20,35};
            String text = Arrays.toString(dataset);

            webview.loadUrl("javascript:initGraph(" + 
                    text + ", "
                    (webview.getHeight()) + ", "
                    + (webview.getWidth()) + ")");
        }
    });

    // Load base html from the assets directory
    webview.loadUrl("file:///Android_asset/html/graph.html");
}
</ code>

}
8
Nebel22

私の知る限り、AndroidアプリはJavaのみです。したがって、d3を使用するには、Java javascriptエンジン/ラッパー（Rhino、または 明らかにPhoneGap ）、またはHTML5アプリケーションを作成します（Androidアプリ自体ではありません）。

PhoneGapに関するそのリンクは、HTML5からアプリを生成することに関するもののようですが、任意の追加ライブラリを含めることができるかどうかを確認する必要があります。

アプリである必要がありますか？ D3は、アプリよりもHTML5サイトの作成に適しています。

2
Phil H

こんにちは私はphonegapと一緒にD3、C3を使用してインストール可能なアプリでグラフをレンダリングする問題がありました。問題は、c3.generateを実行しようとすると、ブラウザーでは正常に機能しますが、インストール可能なアプリでは機能しないということでした。解決策は、独自のディレクティブを記述し、その中でC3を使用することです。

これが誰かを助けることを願っています。

0
Prostil Hardi