JavaScriptの配列の数値の増分

2020-03-24 javascript angularjs d3.js

非表示のレイヤーからノードをインクリメントまたはデクリメントするために、このビジュアライゼーションに機能を追加しようとしています。私はこのコードを追加しました:

以前に述べたように、隠しレイヤー内の隠しレイヤーの数を増減するため。しかし、私は成功していないので、助けが必要です。これはどのように行われ、私は正しい軌道に乗っていますか?

for (var i = 0; i < vm.hiddenLayersDepths[hiddenLayerLoop]; i++) {
    function minus() {
        vm.hiddenLayersDepths.map(function(val){return --val;});
        //Arrays.fill(vm.hiddenLayersDepths, vm.hiddenLayersDepths[0] - 1);
    }

    function plus() {
        if (vm.hiddenLayersDepths[0] < 5) {
            vm.hiddenLayersDepths.map(function(val){return ++val;});
            //Arrays.fill(vm.hiddenLayersDepths, vm.hiddenLayersDepths[0] + 1);
        }
    }
}

編集:+または-を各非表示レイヤーに個別に設定します。

Answers

Array.prototype.map()

map()メソッドは、次の結果が入力された新しい配列を作成します 呼び出し元配列のすべての要素で提供された関数を呼び出す。

したがって、値をhiddenLayersDepths再割り当てします。

vm.minus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i - 1);
  draw();
};

vm.plus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i + 1);
  draw();
};

作業デモ

https://codepen.io/aswinkumar863/pen/ZEGVYBp

イベントバインディングによってこれを簡単に行うことができます。ボタン要素でng-clickを使用し、コントローラー内に対応するメソッドを追加します。

<input type="button" value="-" id="moins" ng-click="vm.decrementHiddenLayerCount()">
<input type="button" value="+" id="plus" ng-click="vm.incrementHiddenLayerCount()">

対応するイベントハンドラーをコントローラーに追加します。イベントハンドラーでは、 ngModel値をインクリメントするngModelです。ビューとモデルの同期を保ちます。以下に、イベントハンドラーを追加する必要があるコードを追加しました。

app.controller('MainCtrl', function( $scope, $interval, $window, $q ) {
    var vm = this;

vm.incrementHiddenLayerCount = function() {
  const hiddenValue = vm.hiddenLayerCountSlider.value;
  if (hiddenValue < vm.hiddenLayerCountSlider.options.ceil) {
    vm.hiddenLayerCountSlider.value += 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw();
  }
  }

  vm.decrementHiddenLayerCount = function() {
    debugger;
    const hiddenValue = vm.hiddenLayerCountSlider.value;
    if (hiddenValue > vm.hiddenLayerCountSlider.options.floor) {
     vm.hiddenLayerCountSlider.value -= 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw(); 
    }
  }

ここで作業コードを見つけてください: https : //codepen.io/jasdeep7991/pen/mdJayKg

ノードを1つのレイヤーから明確に追加または削除するには、各レイヤーに+ボタンと-ボタンが必要です。 hiddenLayersCountのインデックスごとにこれらの個別のボタンを生成するとき、+および-ボタンのセットから「データセット」接続を、それが関連するレイヤーに追加します。したがって、2つの非表示レイヤーがある場合、jsで追加した後、HTMLのようなボタンが作成されます。

<div class"plus-minus-container">
  <input data-id="0" type="button" value="-" class="minus-button">
  <input data-id="0" type="button" value="+" class="plus-button">
</div>

<div class"plus-minus-container">
  <input data-id="1" type="button" value="-" class="minus-button">
  <input data-id="1" type="button" value="+" class="plus-button">
</div>

それらをjsで追加するときに、クリックリスナーをそれぞれに追加し、vmスコープ(またはvm.hiddenLayersDepths配列にアクセスできる場所)でaddNodeToHiddenLayer()またはremoveNodeFromHiddenLayer()を呼び出します。

function addNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);

  if (vm.hiddenLayersDepths[layerIndex] < 5) {
    vm.hiddenLayersDepths[layerIndex] += 1;
  }
}

function removeNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);
  if (vm.hiddenLayersDepths[layerIndex] > 1) {
    vm.hiddenLayersDepths[layerIndex] -= 1;
  }
}

Related