Показать график D3 с ember

Может ли кто-нибудь объяснить, как визуализировать простой линейный график с d3 и ember, используя данные ember для моделей. График должен быть рендер, когда базовая модель изменится.Показать график D3 с ember

Я нашел следующий jsfiddle: «удаленное соединение, чтобы можно было разместить решение», но не понимаю, как это работает. Как его можно адаптировать, например, для использования реальной модели данных ember-данных. Что-то вроде:

App.Point = DS.Model.extend({ 
    x: DS.attr("number"), 
    y: DS.attr("number") 
});

обновление:

Intuitivepixel очищены и модернизированы пример. Я также добавил некоторые фиктивные данные: http://jsbin.com/abadom/11/edit Теперь проблема заключается в том, что произвольно сформированные значения все же отображаются вместо данных привязки.

обновление 2:

После помощи от некоторых людей на IRC, это делает то, что я хотел: http://jsbin.com/abadom/35/edit

источник

2013-06-17 ddccffvv

Работая с примера, вы можете заменить функцию «generateNewChartValues» на запрос ajax на ваш сервер, который возвращает значения y для диаграммы. Чтобы заставить его работать с точками, например с вашей моделью, вам нужно будет изменить, как функции просмотра 'didInsertElement' и' updateChart' работают с основным свойством содержимого; вместо того, чтобы быть массивом значений y, свойство содержимого, по-видимому, будет массивом «точек». – rossta

Предположим, что есть PointController (и маршрут?), Не могли бы вы объяснить, как я получаю доступ к этим данным (controller.content) в ChartView? – ddccffvv

Содержимое ChartView уже привязано к 'App.chartValuesController'; см. в ApplicationView 'chartValuesBinding: 'App.chartValuesController.content'' и в шаблоне' {{посмотреть App.ChartView contentBinding = "view.chartValues"}} '. Задайте содержимое chartValuesController с помощью запроса ajax на ваш маршрут точек. – rossta

Это не может быть полным решением, но вслед за example вы упомянули я переработан код немного, так что он использует модели ember-data. Я также обновил все зависимости js до последних версий, чтобы доказать, что он все еще работает. Думаю, теперь у вас есть лучшая отправная точка при использовании модели ember-data вместе с d3 и все еще следуют правилам ember.

Посмотрите на это jsbin, возможно, вы сочтете это полезным.

Редактировать

Поскольку вы где просят маршрутов в комментариях, смотрите здесь еще обновленный jsbinс маршрутами. Он по-прежнему использует случайные значения (для простоты), но вы можете видеть изменение данных путем навигации по маршрутам и т. Д.

Надеюсь, это поможет.

источник

2013-06-17 23:31:52 intuitivepixel

Спасибо, это уже намного понятнее.Только последний вопрос, предположим, что ChartValue поступает из какого-то магазина, может быть, через светильники или через вызов json api. Обычно я делаю что-то вроде return App.ChartValue.find() в ChartValueRoute, но здесь нет маршрута. И тогда можно было бы получить значения с помощью 'controllers.chartvalue.content' или чего-то подобного? – ddccffvv

См. Этот обновленный jsbin: http://jsbin.com/ifarof/4/edit Я добавил «ApplicationRoute», где возвращается верхушка модели, ну, все же randomValues, но это может быть что-то вроде «App.ChartValues. find() ', если у вас есть Fixtures, например, в вашем шаблоне вы можете связать контент вида следующим образом:' {{посмотреть App.ChartView contentBinding = "model"}} ' – intuitivepixel

Ответ обновлен с помощью jsbin, содержащих маршруты ... есть a – intuitivepixel

Показать график D3 с ember

ответ

Смежные вопросы